Hovering over test's steps break website visual

[ddeath]

• Operating System: Linux Mint 17
• Cypress Version: 0.19.2
• Browser/Browser Version: Google Chrome 60.0.3112.10 (Official Build) dev (64-bit)

Are you requesting a feature or reporting a bug?

bug

Current behavior:

When you hover over test's steps it breaks the website visual

Expected behavior:

It will look same as original page

How to reproduce the current behavior:

To replicate this bug:

git clone git@github.com:ddeath/cypress-css-bug.git
cd cypress-css-bug
npm install
./node_modules/.bin/http-server

Then open cypress and run test suite.

• all 2 tests should pass
• you should see nice 10 icons from bootstrap
• click on second test to see steps, you should see 10 steps
• hover over one of them
• now the nice icons are gone

Test code:

describe('Test css', () => {
  it('Should be able to visit index.html', () => {
    cy.visit('http://127.0.0.1:8081/');
  });

  it('Should be able to get all ten icons', () => {
    cy.get('span.glyphicon-info-sign');
    cy.get('span.glyphicon-envelope');
    cy.get('span.glyphicon-off');
    cy.get('span.glyphicon-film');
    cy.get('span.glyphicon-user');
    cy.get('span.glyphicon-print');
    cy.get('span.glyphicon-camera');
    cy.get('span.glyphicon-tint');
    cy.get('span.glyphicon-fire');
    cy.get('span.glyphicon-leaf');
  });
});

Additional Info (images, notes, stack traces, etc)

[jennifer-shehane]

Can confirm.

Before snapshot

On snapshot

Network Tab

• Before Snapshot: 200 Response from http://127.0.0.1:8081/assets/fonts/glyphicons-halflings-regular.woff2
• On Snapshot: 404 Response from http://127.0.0.1:8081/fonts/glyphicons-halflings-regular.woff2

[chrisbreiding]

When we save a snapshot, we grab all the CSS styles as text, then when we restore the snapshot on hover, we put the styles back, inlining them on the page in a <style> tag. The reason we do that is to avoid extra http requests when the snapshot is restored, or else there would be too much latency when trying to scrub over snapshots.

This problem arises when there are relative paths in the CSS.

In this example, the stylesheet at /assets/css/bootstrap.css references ../fonts/glyphicons-halflings-regular.eot et al, meaning the absolute path is /assets/fonts/glyphicons-halflings-regular.eot. But when the snapshot is restored, since the styles are inlined, the paths end up relative to the page, /index.html, so it tries to load the font files from /fonts/.

The solution is pretty simple: when we grab and stringify the styles, we need to search the styles for paths and replace them with absolute paths, so it's loading assets from the right location when the snapshot is restored.

[brian-mann]

We can use the browser's own native ability to do this - since the resolved URL can be affected by things like the base tag (and not just what the current URL is).

It'd work like this:

getFullyQualifiedUrl = (remoteDocument, url) ->
    ## the href getter will always resolve an absolute path
    ## taking into account things like the current URL and 
    ## the <base> tag
    a = remoteDocument.createElement("a")
    a.href = url
    a.href

[chrisbreiding]

The fix for this is complete and will be released in 0.20.0. We'll update this issue and reference the changelog when it's released.

[brian-mann]

Fixed in 0.20.0

[leggomuhgreggo]

Did this end up making it into master? Same issue for me.

It seems to just be the inlined component styles, since my global styles are still applying.