javascript - 如何断言 HTML 元素在包含样式表后不会改变其外观?
问题描述
环境
我正在为网站编写插件。它将通过插件的 CSS 向 DOM 添加元素。我希望样式仅限于插件,即一旦插件包含在网页上,插件之外的任何元素都不应改变其外观。
我正在使用 cypress 运行集成测试。当插件包含在页面上时,如何断言所有预先存在的元素的样式保持不变?我可以在插件加载前后访问该页面。
方法
这是我认为应该起作用的:
cy.visit('theURL');
getStyles().then(oldStyles => { // Get the styles of the elements
mountPlugin(); // Mount the plugin (including CSS)
getStyles().then(newStyles => { // Get the (possibly changed) styles
newStyles.forEach((newStyle, i) => // Compare each element’s style after
expect(newStyle).to.equal(oldStyles[i]) //+ mounting to the state before mounting
);
});
});
function getStyles() {
return cy.get('.el-on-the-page *').then((elements) => { // Get all elements below a certain root
const styles: CSSStyleDeclaration[] = []
elements.each((_, el) => { // Get each element’s style
styles.push(window.getComputedStyle(el)); //+ and put them it an array
});
return styles; // Return the styles
});
}
问题
CSSStyleDeclaration 中的数字键
该行expect(newStyle).to.equal(oldStyles[i])
失败,因为oldStyles[i]
包含仅列出属性名称的数字键。例如,
// oldStyles[i] for some i
{
cssText: "animation-delay: 0s; animation-direction: normal; […more]"
length: 281
parentRule: null
cssFloat: "none"
0: "animation-delay" // <-- These elements only list property names, not values
... //+
280: "line-break" //+
alignContent: "normal" // <-- Only here there are actual property values
... //+
zoom: "1" //+
...
}
解决方法
我通过手动循环遍历 CSS 键并检查键是否为数字来解决此问题。但是,这些数字键只出现在 中oldStyles
,而不出现在 中newStyles
。我写这个是因为这对我来说看起来很可疑,并且我认为错误可能已经存在。
// Instead of newStyles.foreach(…) in the first snippet
newStyles.forEach((newStyle, i) => {
for (const key in newStyle) {
if(isNaN(Number(key))) {
expect(newStyle[key]).to.equal(oldStyles[i][key]);
}
}
});
空属性值
我在这里做出隐含的假设,即 DOM 已实际加载并已应用样式。根据我的理解getLinkListStyles
,cy.get
应该安排在cy.visit
等待窗口触发load
事件之后才运行。
从赛普拉斯文档:
cy.visit()
当远程页面触发其load
事件时解析。
但是,使用上述解决方法后,我在oldStyles
. 例如:
//oldStyles[i] for some i
{
cssText: "animation-delay: ; animation-direction: ; animation-duration: ; […more]"
length: 0
parentRule: null
cssFloat: ""
alignContent: ""
...
}
尝试的解决方案
请注意,当我显式使用带有 的回调时,此行为不会改变cy.visit
,即:
cy.visit(Cypress.env('theURL')).then(()=>{
getStyles().then((oldStyles) => {
// (rest as above)
cy.wait(15000)
开头也没有getStyles()
:
function getStyles() {
cy.wait(15000); // The page has definitely loaded and applied all styles by now
cy.get('.el-on-the-page *').then((elements) => {
...
解决方案
我无法回答有关空属性值的问题,解决方法不应该影响事情。如果我理解正确,您在不使用解决方法时会获得属性值?
数字键
这些几乎可以肯定是内联样式的cssText样式的索引。
数字键的数量与 中的条目完全相同cssText
,并且值与 中的键值对的 LHS 匹配cssText
。
第二个 getStyles() 上缺少数字键
你确定吗?
如果我在没有插件挂载的情况下运行你的代码,我会失败,因为它比较对象引用,
getStyles().then(oldStyles => {
// no plugin mounted
getStyles().then(newStyles => {
newStyles.forEach((newStyle, i) =>
expect(newStyle).to.equal(oldStyles[i])
);
});
但如果我使用.to.deep.equal
它成功
getStyles().then(oldStyles => {
// no plugin mounted
getStyles().then(newStyles => {
newStyles.forEach((newStyle, i) =>
expect(newStyle).to.deep.equal(oldStyles[i])
);
});
getComputedStyle() 返回一个活动对象
返回的样式是一个实时的 CSSStyleDeclaration 对象,它会在元素的样式更改时自动更新。
所以你需要在比较之前克隆结果,即使插件在你比较时改变了一些东西,它们也是一样的。
我建议应用JSON/stringify()
到结果并比较字符串,它非常快,也不需要深度相等。
function getStyles() {
return cy.get('.el-on-the-page *').then((elements) => {
const styles = []
elements.each((_, el) => {
styles.push(window.getComputedStyle(el));
});
return JSON.stringify(styles);
});
}
getStyles().then(oldStyles => {
mountPlugin();
getStyles().then(newStyles => {
expect(newStyles).to.equal(oldStyles);
});
});
推荐阅读
- flutter - 如何在颤振中正确重用小部件样式?
- c# - Richtextbox DetectUrl 错误
- c++ - 我的选择排序代码是否存在问题,导致它跳过数组中的元素?
- machine-learning - ValueError:检查目标时出错:预期dense_3的形状为(1,)但得到的数组形状为(11,)
- c++ - 如何正确搜索 4 x 4 2d 矩阵中的值?
- mathjax - mathjax 3 的配置问题
- function - 在 QUERY 函数中包含标准 Google 表格函数时的语法是什么?
- excel - 创建一个按钮,如果按下则将值添加到单元格
- c# - 是否建议将大型字典拆分为多个部分?
- javascript - Puppeteer 抛出“节点不可见...”错误