Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others


0 votes
in Technique[技术] by (71.8m points)

javascript - Is there a way in Playwright to select a specific button inside a dynamic table?

I'm new in developing and I'm facing a real problem with the creation of one e2e test.
Basically, I have a table with 2 or more rows, every row has 5 columns ( title, x, y,z button). How can I click the button on the correct row using the title? (This is a test to prove that the delete process of this table works). The application I'm testing is written with React framework, so all the tables change frequently and I need a way to trust the code and don't have any bugs. I need to click this element but it is not ever in the same position


     <td>Some Title</td>
       <button>I need to click this</button>
    <!--other rows--!>

This is the solution I came across

const rows = await page.$$eval("tr", (row) =>
    row.map((e) => e.textContent)
const correctRowIndex = rows.findIndex((e) => e.includes(TITLE_I_KNOW));
await page.click(
    "//tr[normalize-space(.)='" + rows[correctRowIndex] + "']/td/button"

Desired behaviour

My code seems not to follow the best practice, I need a solution that makes this thing in 2 parts.
1 - Saving the correct row into a variable
2 - Click on the button contained in the saved row

Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share