Any examples for scenarios with p-datatable-wrapper objects about demo.playwright

[lmlikota]

You can click on that element (purple circle on screenshot) using Xpath //div[@class='p-datatable-wrapper']/table/tbody/tr[1]/td[10]/a[@class="edit css-1hqfesk"] You can join Playwright Slack channel if you like playwright.slack.com.

[MarcusFelling]

@lmlikota XPath can be fragile, and the css class will likely be dynamic and change in this case, so it should be avoided as selector.

@ramnutheti Are you looking to validate the table data? For that, you would query the page with specific selectors for the table, then assert its contents.
e.g.
await expect(page.locator('.my-table-row').nth(3)).toContainText('Job');

You can also use locators to work with element lists: https://playwright.dev/docs/locators#lists

[lmlikota]

@MarcusFelling Are you suggesting not to use Xpath and CSS selectors? But in your above example you have used .mytable row which is CSS class, nth(3) which is index and toContainText which is also something that CSS doesn't support out of the box but Xpath does .

So above example is combination of CSS selector using Class, index and partial text is not tied to DOM changes? How come if it relies on CSS class, row index and partial text? If any of them change in DOM this locator will fail. I'm trying to understand how is this better then writing relative Xpath.

So in Xpath your above example would be:
await expect(page.locator('//*[@class='my-table-row'])[3]/*[contains(.,"Job")]')

[MarcusFelling]

https://playwright.dev/docs/selectors#best-practices