selenium - 带有 Selenium 的 CSS 模块？

Question

我正在使用 React/Redux 和 CSS 模块开发一个 Web 应用程序。对于单元测试，我使用identity-obj-proxy来模拟我的 CSS 导入。

然而，QA 团队想知道在使用 Selenium 时如何处理混淆的类名（我自己完全不熟悉）。我能找到的唯一提到的两者是这个问题，但接受的答案对 QA 来说并不清楚。

在这种情况下使用 Selenium 的一些解决方案是什么（最好是一个易于理解的答案，我可以去 QA 团队）？

Answer 1

有多种方法可以处理此问题，如此处所述。

我最终在我们的开发环境的 webpack 配置中关闭了 CSS 散列（通过CSS LoaderlocalIdentName提供的选项）。

例如，localIdentName=[name]__[local]而不是默认的localIdentName=[hash:base64].

Answer 2

我认为在 BDD 测试中使用 CSS 选择器更好，因为我们可以保持与生产环境相同的 webpack 配置。和使用 CSS 选择器相比，使用 Xpath 非常容易。

这是一个例子：

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));
    });
  });
});

PS 该演示使用的是 nodejs，我假设 Python 具有类似的功能。

Answer 3

我创建了 webpack 插件webpack-cssmap-plugin。它允许使用原始类和混淆类名之间的映射创建 JSON 文件。因此，可以不将带有localIdentName的长类名添加到您的 HTML