CODEWITHSUNDEEP
javascriptplaywright
sbonnick
sbonnick

Reputation: 3

playwright javascript wait for link to be bold

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!

Upvotes: 0

Views: 1246

Answers (1)

Alapan Das
Alapan Das

Reputation: 18634

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)

Upvotes: 2

Related Questions