I’m working on a series of projects, where I have a watcher running, that recompiles my JS and SCSS-files, every time I change something.

But when I make these style-changes, and rerun my Cypress-tests, then the tests doesn’t see my change.

Example

body {
  padding: 10px;
} 

Start up Cypress with: npx cypress open and run test with:

cy.get('body').should('have.css', 'padding', '10px');

Success!

Now, while the “Cypress Open”-UI still open, I modify my SCSS to this:

body {
  padding: 20px; // 20px instead of 10px
} 

The watcher compiles a new base.css-file. If I refresh the site in my ‘regular browser’, then I see the change there immediately.

But when I rerun my Cypress-test, with this still:

cy.get('body').should('have.css', 'padding', '10px'); // Now asserting 20px to be 10px

But it still succeeds (!?!?).
This must be because it’s not ‘finding’ the newly compiled .css-file or something.

As a debugging attempt, I try to load a new page, like this:

cy.visit('/?foobar'); // To bust the cache
cy.get('body').should('have.css', 'padding', '10px'); // Still asserting 20px to be 10px

It still succeeds (incorrectly). Grr!

If I then stop Cypress entirely and run: npx open cypress anew, then it works:

cy.visit('/');
cy.get('body').should('have.css', 'padding', '10px'); // Trying to assert 20px to be 10px

Then it fails (as it should).

Overarching question

How do I get Cypress to ‘see my newly bundled/compiled stylesheet’ after my watcher compiles a new one, without having to stop and start the Cypress UI?

Or how do I debug my issue here?

About the project

It’s a WordPress-project, with a lot of custom code. It’s using Webpack to compile the assets. There is no hot-reloading.

I can see that the styles are loaded in like this:

<link rel='stylesheet' id='project-id-base-css' href='http://project-slug.test/wp-content/themes/CUSTOMTHEME/assets/dist/css/base.css?r=e7699c8a4f2ec1f8c9f818d804a3e186' type='text/css' media='all' />

And that ?r=e7699c8a4f2ec1f8c9f818d804a3e186 doesn’t change between refreshed, since that is the git commit hash I’m on.

Solution attempt 1: Change the get-parameter on the styles

add_filter('style_loader_src', function ($href) {
    if (strpos($href, "base.css") !== false) { 
        return add_query_arg('r', time(), $href);
    }
    return $href;
});

This works!!

But it would be nice to tell Cypress: ‘Just because there is a get-parameter on the stylesheet, please don’t cache it’. Can that be done?