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