带有 Selenium 的 CSS 模块？答案

【问题标题】：CSS Modules with Selenium?带有 Selenium 的 CSS 模块？
【发布时间】：2017-03-26 06:52:06
【问题描述】：

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

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

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

【问题讨论】：

请阅读How to Ask。请提供您尝试过的代码和执行结果，包括任何错误消息等。同时提供指向页面和/或相关 HTML 的链接。

标签： selenium selenium-webdriver integration-testing css-modules react-css-modules

【解决方案1】：

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

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

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

【讨论】：

【解决方案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));
    });
  });
});

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

【讨论】：

【解决方案3】：

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

【讨论】：