Rayrun
← Back to Discord Forum

Need help with clicking all row elements

AUT URL : https://www.leafground.com/grid.xhtml

I am currently trying to handle a grid - very similar to the one shown in the link. There is the main table and then there is another table that appears when you click the arrow before the name.

I want to do it for all the 5 rows from the table ( page 1) and then get all the order ids from the child table. But right now the code that I've formulated only clicks on the first element and displays the first sub table and then exits for the second Toggle Row element .

My code

const parenttable = await page.locator(`tbody#form\\:dt-products_data.ui-datatable-data.ui-widget-content`).locator(`tr`);
        const elementCount = await parenttable.count();
        

        // also tried with i++ or i+=1 but none works
        for(let i=0;i< elementCount;i+=2){ 

            const clickeleme = await parenttable.nth(i).locator(`td`).nth(1).getByLabel(`Toggle Row`);
            await clickeleme.click();
            await page.waitForTimeout(3000);

This thread is trying to answer question "How can I modify my code to click on all the rows in the table and extract all the order ids from the child table?"

1 reply

sorry I'm a newbie here, this is the best I can do for a time being, may need to figure out may need to figure out how to property extract data from subtable

import {test,expect} from '@playwright/test'

test.use({
    baseURL: 'https://www.leafground.com/'
})
test.describe.only('try', () => {
    test.beforeEach(async ({page}) => {
        await page.goto('grid.xhtml')
    })
    test('get subtable id', async ({ page }) => {
        const tr = await page.locator('tbody.ui-datatable-data.ui-widget-content > tr.ui-datatable-selectable').all()
        const outData = []
        for (let i of tr) {
            const currentRow = i.getByRole('gridcell').nth(2)
            const currentName = await currentRow.innerText()
            await i.getByRole('gridcell').nth(1).click()
            const subTableData = await page.locator(`xpath=//h5[text()='Orders for ${currentName}'] >> css=+div tbody.ui-widget-content`).innerText()
            outData.push({
                'name': currentName,
                'subTableText': subTableData
            })
        }
        console.log(outData)
    })
})
image.png

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.