microsoft / playwright

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
https://playwright.dev
Apache License 2.0
66.85k stars 3.66k forks source link

[Question] refresh page is not working #18685

Closed InduKrish closed 1 year ago

InduKrish commented 2 years ago

refresh page is not working

Scenario: After updating the values on the ui, the value gets updated on the ui only after page refresh. I can manually verify that and it works fine. however in the test, i use page.reload to refresh the page, but the value doesnt get updated even after refresh I am wondering if I should do anything else other than page.reload() , can you please assist me with the details on how to refresh the page?

  test("Navigate to Bidding awarding Page1", async ({page}) => {
        await actor.attemptsTo(Click.on('Text', /Bidding & Awarding/));
        await actor.attemptsTo(Click.on('Text', /Accruals/));
        for (const data of accrual) {

            const originalAccrualDays = await actor.attemptsTo(RetrieveCell.getCell('paged-table-CrewMemberVacationAccruals', data.row));
            console.log("originalAccrualDays" + originalAccrualDays);
            await actor.attemptsTo(ClickKebab.on('KebabMenu', 'paged-table-CrewMemberVacationAccruals', data.row));

            // code to update
            await actor.attemptsTo(UpdateAccrual.on('paged-table-CrewMemberVacationAccruals', data.adjustedAccrualDays, 'button-text-modal-save', 'button-text-modal-cancel', data.row,page));

            //tried all the options below to refresh the page.
            //await page.reload()
            // await page.reload({timeout:20000, waitUntil: "commit"}); --> didnt work 
            // await page.reload({waitUntil: "networkidle"}); --> didnt work 
           // await page.reload({waitUntil: "load"});  --> didnt work
            //  await page.waitForTimeout(10000);

            await actor.attemptsTo(Click.on('Text', /Bidding & Awarding/));
            await actor.attemptsTo(Click.on('Text', /Accruals/));
           // await page.waitForTimeout(10000);

            await actor.attemptsTo(ClickKebab.on('KebabMenu', 'paged-table-CrewMemberVacationAccruals', data.row));

            await actor.asks(ValidatePageTitleContent.toContainText('header-update-CrewMemberVacationAccrualUpdate', 'Update Accrual'))

            await actor.asks(Elements.notToBe.enabled(/Original Accrual/));
            await actor.asks(Elements.toBe.visible(/Adjusted Accrual/));
            await actor.asks(Elements.toBe.visible(/Comment/));
            await page.waitForTimeout(20000);

            //verification after refresh is failing, it still has the old values. not the updated values.
            await actor.asks(Elements.to.containText('originalAccruedDays', originalAccrualDays));
            await actor.asks(Elements.to.containText('adjustedAccruedDays', data.adjustedAccrualDays));
            await actor.asks(Elements.to.containText('adjustmentComment', data.adjustmentComment));
            await actor.attemptsTo(Click.on('Id', 'button-text-modal-save'));

        }
yury-s commented 2 years ago

await page.reloade() will reload the page the same way as clicking Reload button in the browser would. You probably need to wait for some condition after the navigation to ensure that the page UI is fully functional (page.reload only wait for the navigation to finish). Can you describe what you mean by "but the value doesnt get updated even after refresh", how do you check the value, will it update if you uncomment waitForTimeout you have in the code?

InduKrish commented 2 years ago

after user hit on the kebab menu i do have a modal popup where user has to enter the value and hit save, and verify if the value that user enters is updated on the web table view. as of now, to see the updated value on the web table, user has to manually refresh the UI and then the update value gets displayed on the table.

Note: when i manually test it works fine. after update, i manually click on the reload icon on the browser, and i see the updated value displaying in the web table.

and I am trying to refresh the page in the test using page.reload() as mentioned above. but UI still did not show the update value that makes me think that the reload doesnt work.

await page.waitForTimeout(10000) did not work either.

not sure which condition to wait for, all i have to do is refresh the page and navigate to the tab and verify the value after the refresh. navigating to tab like blow: await actor.attemptsTo(Click.on('Text', /Bidding & Awarding/)); await actor.attemptsTo(Click.on('Text', /Accruals/));

Screen Shot 2022-11-09 at 2 08 30 PM Screen Shot 2022-11-09 at 2 13 17 PM
yury-s commented 2 years ago

We need a reproducible example that we could run locally to make this report actionable. Can you share a minimal repro?

pavelfeldman commented 1 year ago

We need more information to act on this report. As long as we can't repro it, it is unlikely with can make progress with it. Allow me to close it, but please file a new one and link to this issue when you get back to it!

AndriiFrolov commented 1 year ago

I do have same issue. Can't give you how to reproduce it, but in my project (React) we have a functionality like:

  1. Fill input fields
  2. Click refresh in browser
  3. Verify fields are still filled with what I entered

it works manually, but not with page.reload()