我正在使用 React/Redux 和 CSS 模块开发一个 Web 应用程序。对于单元测试,我使用identity-obj-proxy来模拟我的 CSS 导入。
然而,QA 团队想知道在使用 Selenium 时如何处理混淆的类名(我自己完全不熟悉)。我能找到的唯一提到的两者是这个问题,但接受的答案对 QA 来说并不清楚。
在这种情况下使用 Selenium 的一些解决方案是什么(最好是一个易于理解的答案,我可以去 QA 团队)?
我正在使用 React/Redux 和 CSS 模块开发一个 Web 应用程序。对于单元测试,我使用identity-obj-proxy来模拟我的 CSS 导入。
然而,QA 团队想知道在使用 Selenium 时如何处理混淆的类名(我自己完全不熟悉)。我能找到的唯一提到的两者是这个问题,但接受的答案对 QA 来说并不清楚。
在这种情况下使用 Selenium 的一些解决方案是什么(最好是一个易于理解的答案,我可以去 QA 团队)?
有多种方法可以处理此问题,如此处所述。
我最终在我们的开发环境的 webpack 配置中关闭了 CSS 散列(通过CSS LoaderlocalIdentName
提供的选项)。
例如,localIdentName=[name]__[local]
而不是默认的localIdentName=[hash:base64]
.
我认为在 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 具有类似的功能。
我创建了 webpack 插件webpack-cssmap-plugin。它允许使用原始类和混淆类名之间的映射创建 JSON 文件。因此,可以不将带有localIdentName的长类名添加到您的 HTML