Im currently facing a problem using playwright where I need to click a link, and then wait for it to turn bold. I can find the element itself and click it using:
await page.click("a[id$='clickablelink_0']")
and I am currently waiting for to change when I see a class (which adds bold) added to the element:
await page.waitForSelector("a[id$='clickablelink_0'][class~=xmp]")
However this class name is changing every so often. Is there a way instead of using the class, look directly for the value of "font-weight"? ideally as a ">=" to a value?
Just some notes:
Thanks!
In case of asserting a css property you can use the expect toHaveCSS() assertion for this. You can play around with the timeout as well, by default expect assertions have a 5 second timeout. Now you can increase the timeout for specific assertions as shown below or globally as well.
await expect(page.locator("a[id$='clickablelink_0'][class~=xmp]")).toHaveCSS(
'font-weight',
'30px',
{timeout: 7000}
)
Or, if you want to extract the value of font-weight and then apply an assertion for greater than, you can do like this:
const element = await page.waitForSelector(
"a[id$='clickablelink_0'][class~=xmp]"
)
const fontWeight = await element.evaluate((el) => {
return window.getComputedStyle(el).getPropertyValue('font-weight')
})
//extracting and converting number
expect(+fontWeight.replace(/\D/g, '')).toBeGreaterThan(30)