Question

我正在使用React / Redux和CSS模块在Web应用上工作。对于单元测试，我使用identity-obj-proxy来模拟我的CSS导入。

然而，QA团队想知道如何在使用Selenium（我完全不熟悉自己）时继续使用混淆的类名。我唯一能够找到is this question的两个一起提到，但接受的答案对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 文件。因此，可以不将带有 localIdentName 的长类名添加到您的 HTML

使用Selenium的CSS模块？

3 个答案: