How To Get CSS Value | Playwright Tutorial Part 65

• 01:40 Explanation of the evaluate function
• 02:25 Demonstration of using getComputedStyle to fetch color
• 03:13 Logging the obtained color and using an assertion

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 evaluate function, window.getComputedStyle, and getPropertyValue to fetch the computed style of the element. They then compare the obtained color with the expected color using an assertion.