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

Categories

0 votes
1.4k views
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

HTML

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

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
...