[Bug]: Popup failing to open in Webkit test but working in Safari simulator and Chromium and Firefox tests

stefanm361 commented 3 months ago

Version

1.41.2

Steps to reproduce

Click on the 'Add' button to open up the popup

Expected behavior

I expect to see the 'Add Status' popup open properly after clicking the button like this: Add Status Success

Actual behavior

Though the popup opens up like in the screenshot included in 'Expected behaviour' whenever I run the test using Chromium or Firefox, and even opens when I use a simulator for Safari, when I run the test using Webkit (17.4) as the project, clicking the button leads to a blank/seemingly unloaded page and gets stuck there. The button is being successfully clicked and the 'Edit' buttons right below it for the Status section work fine. Add Status Fail

Additional context

Here is the error log for the test:

Error: Timed out 5000ms waiting for expect(locator).toBeVisible()

Locator: locator('//form[@data-name=\'administration.membership.profile.status.add\']') Expected: visible Received: hidden Call log:

expect.toBeVisible with timeout 5000ms
waiting for locator('//form[@data-name=\'administration.membership.profile.status.add\']')

at ..\pages\membershipPage.js:1023

1021 | await this.page.locator(Status).scrollIntoViewIfNeeded() 1022 | await this.waitAndClick(Status_AddBtn)

1023 | await expect(await this.page.locator(Status_Add)).toBeVisible() | ^ 1024 | await this.VerifyHeadingEditPopUp("Add Status") 1025 | 1026 | let randomDay, randomMonth, year = new Date().getFullYear()

at MembershipPage.VerifyStatusAdd (C:\Users\s_mitrovic\Documents\pencore\pencore-e2e\Playwright\pages\membershipPage.js:1023:53) at C:\Users\s_mitrovic\Documents\pencore\pencore-e2e\Playwright\tests\membership_Profile\TC_05_Status.test.js:39:2

Locators for Status_AddBtn & Status_Add: Status_AddBtn: "//button[@data-name='administration.membership.profile.status.add']" Status_Add: "//form[@data-name='administration.membership.profile.status.add']"

Screenshots of inspect element for Status_AddBtn & Status_Add: Add Status Paths

Environment

System:
    OS: Windows 10 10.0.19044
    CPU: (2) x64 AMD EPYC 7313 16-Core Processor
    Memory: 577.39 MB / 8.00 GB
  Binaries:
    Node: 21.6.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    VSCode: 1.89.0 - C:\Program Files\Microsoft VS Code\bin\code.CMD
  npmPackages:
    @playwright/test: ^1.41.2 => 1.41.2

stefanm361 commented 3 months ago

The screenshot in 'Actual behaviour' was taken during a headed test using Webkit

yury-s commented 3 months ago

Please follow the bug template and provide a self-contained reproduction example which we could run locally. We cannot debug screenshots.

stefanm361 commented 3 months ago

Ok here is the code for the test:

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

//Test not working in webkit, but successful in chromium and firefox

test('Verify Status', async ({page}) => { test.setTimeout(60000) await page.goto("https://smp6auto4-penweb.apps.okd.int.jea-engr.ca/admin1/penweb/app/search/membership") await page.locator("//input[@data-name='username']").fill('admin@example.com') await page.locator("//input[@data-name='password']").fill('Passw0rd_1') await page.locator("//button[@data-name='login.submit']").click() await expect(page.locator("//div[@data-name='search.MEMBERSHIP']")).toBeVisible() if (await page.locator("//div[@data-name='framework.layout.logoutReminder']").count() === 1){ await page.locator("//button[@data-name='framework.layout.logoutReminder']").click() } await page.locator("(//span[text()='Membership'])[1]").click() await page.locator("(//div[@data-name='search.form.grid']//a)[1]").click() await page.locator("//span[text()='Profile']/parent::button").click() await page.locator("(//span[text()='Status'])[1]").click() await page.locator("//button[@data-name='administration.membership.profile.status.add']").click() await expect(page.locator("//form[@data-name='administration.membership.profile.status.add']")).toBeVisible() })

yury-s commented 3 months ago

I'm getting Error: page.goto: net::ERR_NAME_NOT_RESOLVED at https://smp6auto4-penweb.apps.okd.int.jea-engr.ca/admin1/penweb/app/search/membership, the page is not reachable. Would be nice if you could extract relevant code of the web app into self-contained project that doesn't depend on external servers.

microsoft / playwright