• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

114
Views
Waiting for ID to change on component using Puppeteer

I have a table component that has pagination. I've added a data attribute on the <tbody> tag that changes when clicking the table page next button (e.g. data-id: table-page-one changes to data-id: table-page-two. I need to wait for this ID to chance before checking the row elements. The test is passing if I run it with SLOMO=true HEADLESS=false, but when I run it normally, after the pagination click, It gives the following error: thrown: Exceeded timeout of 20000 ms for a test. My code is similar to the follow:

if ('verify table row checkboxes are checked', async () => {
  await page.click(nextTablePageSelector);

  // gets stuck here
  await page. waitForSelector("[data-id='table-page-two']");

  // below works in SLOMO=true HEADLESS=false mode
  // checking each row using $$eval
}); 

I've with a custom delay method between the page.click and page.waitForSelector and it works, but the team doesn't want to uses delays, because it can lead to flakey tests.

What is the proper way to watch for part of the UI changing, or more specifically, watching for an attribute that you're already used to change?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Consider grouping the promises and using the visible flag.

await Promise.all([
  page.click(nextTablePageSelector),
  page.waitForSelector('tbody[data-id=page-two]', { visible: true }),
])
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error