CSS Modules with Selenium?

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].

I think using the CSS selector in BDD test is better, because we can keep the same webpack config as production. And use CSS selector is very easy compared using the Xpath.

Here's an example:

const {By} = require('selenium-webdriver');// Use `contains` wild card to match, and put it in function to reuse.const hashedClassName = (className) => By.css('[class*=\'' + className + '\']');// skip other setting .....describe('Foo Page', function() {  it('There should be a bar component', function() {    return new Promise((resolve, reject) => {      browser        .get(serverUri + 'foo')        .catch(err => reject(err));      // I assume the webpack will use something like below:      // localIdentName: '[name]__[local]--[hash:base64:5]'      browser        .findElement(hashedClassName('Foo__bar'))        .then(elem => resolve())        .catch(err => reject(err));    });  });});

P.S. The demo is using nodejs, I assume Python has the similar features.

I created webpack plugin webpack-cssmap-plugin. It allows to create the JSON file with mapping between original class and obfuscated class names. So it is possible to not add long classnames with localIdentName to your HTML