Search code examples
seleniumselenium-webdriverintegration-testingcss-modulesreact-css-modules

CSS Modules with Selenium?

I'm working on a web app using React/Redux and CSS Modules. For unit tests I'm using identity-obj-proxy to mock my CSS imports.

However, the QA team is wondering how to proceed with the obfuscated class names when using Selenium (which I'm completely unfamiliar with myself). The only mention of the two together that I've been able to find is this question, but the accepted answer wasn't clear to QA.

What are some of the solutions for using Selenium in this situation (preferably an easy-to-understand answer that I can go to the QA team with)?

Solution

  • There are a variety of ways to handle this, as documented here.

    I ended up turning off CSS hashing in the webpack config for our dev environment (via the localIdentName option provided by CSS Loader).

    For example, localIdentName=[name]__[local] rather than the default localIdentName=[hash:base64].