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

Question

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

Answer 1

等待大神答复