CSS Modules with Selenium?

Question

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)?

Please read How to Ask. Please provide the code you have tried and the execution result including any error messages, etc. Also provide a link to the page and/or the relevant HTML. — JeffC
– JeffC, Commented Nov 12, 2016 at 2:16

jabacchetta · Accepted Answer · 2017-09-19 02:17:00Z

2

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

answered Sep 19, 2017 at 2:17

jabacchetta

51.2k11 gold badges71 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dm.shpak · Accepted Answer · 2021-01-25 08:57:41Z

1

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

answered Jan 25, 2021 at 8:57

dm.shpak

3551 silver badge8 bronze badges

Comments

Eric Tan · Accepted Answer · 2019-08-27 23:27:35Z

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.

Collectives™ on Stack Overflow

CSS Modules with Selenium?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related