CSS 使用 Selenium 的模块？

Question

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

但是，QA 团队想知道在使用 Selenium 时如何处理混淆的 class 名称（我对自己完全不熟悉）。我能找到的唯一一起提及的两者，但 QA 不清楚接受的答案。

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

Answer 1

有多种方法可以解决这个问题，as documented here。

我最终在开发环境的 webpack 配置中关闭了 CSS 哈希（通过 CSS Loader 提供的 localIdentName 选项）。

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

Answer 2

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

这是一个例子：

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。该演示使用的是 nodejs，我假设 Python 具有类似的功能。

Answer 3

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

CSS 使用 Selenium 的模块？

CSS Modules with Selenium?

selenium

selenium-webdriver

integration-testing

css-modules

react-css-modules