How to get element color or any CSS value using playwright.
In this video, the presenter demonstrates how to test the color of any element using Playwright. The presenter initially mentions that they expected it to be easy and that there would be a direct function available, similar to Selenium's "get CSS value" function. However, they discovered that in Playwright, it is a little different.
The presenter begins by showing a specific webpage where they want to test the color of a button element. They inspect the element and note that it has a background color. They convert the color code to RGB format to be used in the assertion later.
To obtain the element's color, the presenter explains that they will use the
evaluate function in Playwright. They select the button element by its ID and store it. Then, within the
evaluate function, they use
window.getComputedStyle and pass in the element to get the computed style value. They specifically want the color property, so they use
getPropertyValue('color'). The resulting color is stored in a variable.
To test the color, the presenter logs the obtained color and uses an assertion to compare it with the expected RGB value. However, they notice that the obtained color does not include the alpha value, while they expected an RGBA format. They realize that they missed including a comma in the RGB value, causing the assertion to fail.
In summary, the video guides viewers on how to test the color of an element using Playwright. They use the
getPropertyValue to fetch the computed style of the element. They then compare the obtained color with the expected color using an assertion.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email email@example.com.