How to remove style properties in TestCafe

user_10884973 0
Viewed 850

How can I remove CSS properties on client side using TestCafe on a React build?

Currently I'm working for a client where polylines are drawn, but I am not able to compare DOM results to the original because of the following style attribute transform: matrix(1.4043, 0, 0, 1.4043, 40.5, 0);, which scales the DOM elements.

I'm not able to find any solution so my question is: how can I remove this style attribute?

Thanks in advance!

testcafe reactjs automated-tests testing javascript
1 Answers

A solution is to use the 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);

The above exemple is adding a transform and a background color. You may adapt this code to remove styles instead.

Do not forget to import ClientFunction in the test file.

user_107572000
Related