时间戳

首页 > 解决方案 > 如何在 TestCafe 中删除样式属性

javascript - 如何在 TestCafe 中删除样式属性

问题描述

如何在React构建中使用TestCafe删除客户端的 CSS 属性？

目前我正在为一个绘制折线的客户端工作，但由于以下样式属性，我无法将 DOM 结果与原始结果进行比较transform: matrix(1.4043, 0, 0, 1.4043, 40.5, 0);，它会缩放 DOM 元素。

我找不到任何解决方案，所以我的问题是：如何删除此样式属性？

提前致谢！

标签： javascriptreactjstestingautomated-teststestcafe

解决方案

一个解决方案是使用ClientFunction：

const getStyleAttribute = ClientFunction((selector) => {
    const element = selector();
    return element.getAttribute('style');
});

const setStyleAttribute = ClientFunction((selector, styleValue) => {
    const element = selector();
    element.setAttribute('style', styleValue);
});

const field = Selector('your selector');
const styles = await getStyleAttribute(field) || '';
const updatedStyles = 
`${styles} background-color: red; transform: matrix(1.4043, 0, 0, 1.4043, 40.5, 0);`;

await setStyleAttribute(field, updatedStyles);

上面的例子是添加一个变换和一个背景颜色。您可以修改此代码以删除样式。

不要忘记ClientFunction在测试文件中导入。

推荐阅读