[QUESTION] recorder click isn't re-runnable; how to convert the click to playwright syntax? Please Help

[wadezone]

Need some help please.

I have a company internal website with Power BI visuals. I am trying to use playwright to develop test cases that would test the reports like a user would manipulate them. I am having trouble finding what is the correct object to use to click on a row in a visual. Clicking this element, would adjust all of the other visuals. I would also need to "get" this element text.

I used a public Power BI report that has the same class names and object names like (pivotTableCellWrap cell-interactive tablixAlignLeft )to use as a test for my question since I can not provide a link to our reports.

I ran the following.
npx playwright-cli codegen https://community.powerbi.com/t5/Data-Stories-Gallery/Customer-Analysis-Dashboard/td-p/630893

const { chromium } = require('playwright');

(async () => {
const browser = await chromium.launch({
headless: false
});
const context = await browser.newContext();

// Open new page
const page = await context.newPage();

// Go to https://community.powerbi.com/t5/Data-Stories-Gallery/Customer-Analysis-Dashboard/td-p/630893
await page.goto('https://community.powerbi.com/t5/Data-Stories-Gallery/Customer-Analysis-Dashboard/td-p/630893');

// Click text="Weimei Corp"
await page.frame({
url: 'https://app.powerbi.com/view?r=eyJrIjoiNDIyYWJjM2ItYTgwMi00NjQzLWEzYTItZWMwNzIzOTY2MDUxIiwidCI6IjA0ZWM2MTA5LTRjNzktNGM3My1hZTcxLWE0NzRjMDlhMWY1YSJ9'
}).click('text="Weimei Corp"');

// Close page
await page.close();

The play back actually works, for this site but not mine, because my isn't including the "view" url in the page frame. Maybe because this report was setup specifically to be public and they had to adjust how they did it.

when I do my recording I get the following which doesn't work on playback.

// 0× click
await page.click('//iframe');

// Click text="THERESA"
await page.click('text="THERESA"');

This is what I am doing to get the frame name, not sure where the //iframe came from and it doesn't work either way.
//locate the iframe name visual sandbox
const frame = page.frames().find(frame => frame.name() === 'visual-sandbox');
console.log(frame.name());

I also noticed that during the recording for a different text than I saw a difference reference and that is because that name is in there twice but not as a duplicate just different info for it. I tried that syntax and it didn't work.
//div[3][normalize-space(.)='THERESA WADE' and normalize-space(@title)='THERESA WADE']"

I have attached a few screen shots from my visual. ( I apologize but I had to blur out sensitive PI data). There are some that shows what is displayed when I hover over the different sections when I am using the recording. Which is completely different than what I get from Chrome Dev Tools and do copy selector, js path, or element.

How can I convert my recordings to the correct object and syntax.
Which object and method is the correct one for clicking in pivotTableCellWrap cell-interactive tablixAlignLeft ? then also get that value for sanity check?

Here are the element references:
Copy Element

THERESA WADE

COPY SELECTOR
#pvExplorationHost > div > div > exploration > div > explore-canvas-modern > div > div.canvasFlexBox > div > div.displayArea.disableAnimations.fitToPage > div.visualContainerHost > visual-container-repeat > visual-container-modern:nth-child(3) > transform > div > div:nth-child(4) > div > visual-modern > div > div > div.tableEx > div.innerContainer > div.bodyCells > div > div > div:nth-child(1) > div:nth-child(1)

COPY JSPATH
document.querySelector("#pvExplorationHost > div > div > exploration > div > explore-canvas-modern > div > div.canvasFlexBox > div > div.displayArea.disableAnimations.fitToPage > div.visualContainerHost > visual-container-repeat > visual-container-modern:nth-child(3) > transform > div > div:nth-child(4) > div > visual-modern > div > div > div.tableEx > div.innerContainer > div.bodyCells > div > div > div:nth-child(1) > div:nth-child(1)")

COPY XPATH
//*[@id="pvExplorationHost"]/div/div/exploration/div/explore-canvas-modern/div/div[2]/div/div[2]/div[2]/visual-container-repeat/visual-container-modern[3]/transform/div/div[3]/div/visual-modern/div/div/div[2]/div[1]/div[4]/div/div/div[1]/div[1]

screenshots from my recording.

[pavelfeldman]

Is this issue still relevant? Could you restructure your request in a non-power-bi-specific way? It is a little tricky to follow it since it has so much context...

[wadezone]

Yes, this is still an issue. What is recorded is not re-playable. When I try to code it to pull what is in a table structure it doesn't work either. What information are you needing?

[dgozman]

What is recorded is not re-playable.

This is a noble goal, but unfortunately we are not able to guarantee that. Dynamic pages may change between recording and replaying, so generated script sometimes should be adapted.

---

Thank you for the information. From what I understood:

• Using frame's url does not yield the best results on this page. Using a frame name should probably be better. See [Feature] codegen: use name to reference iframes playwright#5174.
• Sometimes the generated text selector is not ideal. See [Feature] codegen: choose between multiple generated selectors playwright#5178.

I think addressing the two above issues will significantly improve the situation here. Closing this issue for now, thank you for filing!