[Bug] : POM Base Extend Fixtures code block is not working with in webkit browser for my test file (Internal Error)

bhushantbn commented 5 months ago

Version

1.43.1

Steps to reproduce

Install Playwright 1.43 with npm dependency in Ubuntu 22.04.3 LTS
I have created POM for my test suite by using a fixture to initialize my POM object instance for my test case file in beforeEach hook and set URL in fixtures but it's not working in my webkit browser.
run playwright test with all browsers like Webkit, chromium, and Firefox for Command line on headless and UI mode
It shows an internal error in the WebKit browser for both CLI and UI in both modes.
It works in Chromium & Firefox but not in the webkit browser.
Expected behavior

The test should be executed successfully with the POM test fixture and test hooks in the WebKit browser in the UI and headless CLI interface.

Actual behavior

The POM Base Extend Fixtures code block is not working in the WebKit browser for my test file. It shows an internal error when I executed my test case using POM and the test fixture methodology in Playwright with typescript. HTML REPORTS FOR WEBKIT BROWSER FAILURE:

Test in CLI MODE: Test in UI MODE: MY TEST SPEC FILE MY ASSERTION FILE

Additional context

playwright.config.ts

timeout: 5 * 60 * 1000,
  globalSetup: "config/globalSetup.ts",
  testDir: "./test",
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: "html",
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    // baseURL: 'http://127.0.0.1:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: "on-first-retry",
  },

m2d1_PageObjects.ts

import { type Page, type Locator } from "@playwright/test";
export class m2d1_PageObjects {
  protected page: Page;
  readonly getMenuLink: Locator;
  readonly productLink: Locator;
  readonly addToCart: Locator;
  readonly sucessMessageText: Locator;
  readonly headingText: Locator;
  readonly price: Locator;
  readonly menuItem: Locator;
  readonly ItemLocators: Locator;
  readonly signInLink: Locator;
  readonly createAccountLink: Locator;
  readonly shoppingCartLink: Locator;
  readonly proceedToCheckOut: Locator;
  readonly qtyUpdateTextBox: Locator;
  readonly updateCartButton: Locator;
  readonly errorMsg: Locator;
  readonly email: Locator;
  readonly fname: Locator;
  readonly lname: Locator;
  readonly company: Locator;
  readonly streetAddress: Locator;
  readonly country: Locator;
  readonly state: Locator;
  readonly city: Locator;
  readonly zip: Locator;
  readonly phone: Locator;
  readonly nextBtn: Locator;
  readonly paymentMethod: Locator;
  readonly placeOrderBtn: Locator;

  constructor(page: Page) {
    this.page = page;
    this.getMenuLink = page.locator(
      '//span[normalize-space()="Minimum Order Amount For Customer Group"]'
    );
    this.addToCart = page.locator("//span[normalize-space()='Add to Cart']");
    this.productLink = page.locator('//a[normalize-space()="Apple iPhone X"]');
    this.sucessMessageText = page.locator(
      "//div[@class='message-success success message']"
    );
    this.headingText = page.locator("//span[@class='base']");
    this.price = page.locator("//span[@class='price']");
    this.ItemLocators = page.locator("li>a>span");
    this.signInLink = page.getByRole("link",{name:"Sign In"});
    this.createAccountLink = page.getByRole("link",{name:"Create an Account"});
    this.shoppingCartLink = page.getByRole("link", { name: "Shopping Cart" });
    this.proceedToCheckOut = page.getByRole("button", {
      name: "Proceed to Checkout",
    });
    this.qtyUpdateTextBox = page.getByRole("spinbutton", { name: "Qty" });
    this.updateCartButton = page.locator(
      "//span[normalize-space()='Update Shopping Cart']"
    );
    this.errorMsg = page.locator(
      "//div[@data-bind='html: $parent.prepareMessageForHtml(message.text)']"
    );
    this.email = page.locator("//input[@id='customer-email']");
    this.fname = page.locator('input[name="firstname"]');
    this.lname = page.locator('input[name="lastname"]');
    this.company = page.locator('input[name="company"]');
    this.streetAddress = page.locator('input[name="street[0]"]');
    this.country = page.getByLabel("Country");
    this.state = page.locator('select[name="region_id"]');
    this.city = page.getByLabel("City");
    this.zip = page.locator('input[name="postcode"]');
    this.phone = page.getByLabel("Phone Number");
    this.nextBtn = page.getByRole("button", { name: "Next" });
    this.paymentMethod = page.locator("#checkmo");
    this.placeOrderBtn = page.getByRole("button", { name: "Place Order" });
  }
}

Environment

System: Linux Ubuntu 
@playwright/test: 1.43.1,
Distributor ID: Ubuntu
Description: Ubuntu 22.04.4 LTS
Release:22.04
node:- v18.20.2
IDE: VS Code 1.89.0
CPU: x86_64
Memory: 28.70 MB / 16.00 GB
npm : 10.5.0

mxschmitt commented 5 months ago

Would it be possible to provide a self-contained reproduction which we can run locally in order to reproduce the problem?

Maybe a small script/test - like a page.goto does already surface the issue?

Thanks!

bhushantbn commented 5 months ago

Would it be possible to provide a self-contained reproduction which we can run locally in order to reproduce the problem?

Maybe a small script/test - like a page.goto does already surface the issue?

Thanks!

means do you want written code instead of the given screenshot with the Actual URL or something else?

bhushantbn commented 5 months ago

@mxschmitt 2nd point is that as I investigated this bug.

The same test is working perfectly on Windows 10 OS.

But this test isn't working in the above Environment configurations as I mentioned over in this bug report

mxschmitt commented 5 months ago

I tried reproducing on v1.44.0 on Ubuntu 22.04 but was not able to reproduce. Could you try updating to v1.44.0?

if it still fails, could you run the following?

DEBUG=pw:browser npx playwright test

this should give us some more debug output

bhushantbn commented 5 months ago

oh my god 1.44.0 launched?

mxschmitt commented 5 months ago

Yes, yesterday! Let us know if it works for you in that version. Also did you install the deps via npx playwright install --with-deps?

bhushantbn commented 5 months ago

@mxschmitt I have update playwright 1.43 to 1.44 latest version but my test is still not working in web kit browser.

mxschmitt commented 5 months ago

could you run the following?

DEBUG=pw:browser npx playwright test

this should give us some more debug output about the browser launch

bhushantbn commented 5 months ago

DEBUG=pw:browser npx playwright test m2d2.spec.ts

Running 3 tests using 3 workers
[chromium] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading
  pw:browser <launching> /home/bhushan/.cache/ms-playwright/chromium-1117/chrome-linux/chrome --disable-field-trial-config --disable-background-networking --enable-features=NetworkService,NetworkServiceInProcess --disable-background-timer-throttling --disable-backgrounding-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-background-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=ImprovedCookieControls,LazyFrameLoading,GlobalMediaControls,DestroyProfileOnBrowserClose,MediaRouter,DialMediaRouteProvider,AcceptCHFrame,AutoExpandDetailsElement,CertificateTransparencyComponentUpdater,AvoidUnnecessaryBeforeUnloadCheckSync,Translate,HttpsUpgrades,PaintHolding --allow-pre-commit-input --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-backgrounding --force-color-profile=srgb --metrics-recording-only --no-first-run --enable-automation --password-store=basic --use-mock-keychain --no-service-autorun --export-tagged-pdf --disable-search-engine-choice-screen --headless --hide-scrollbars --mute-audio --blink-settings=primaryHoverType=2,availableHoverTypes=2,primaryPointerType=4,availablePointerTypes=4 --no-sandbox --user-data-dir=/tmp/playwright_chromiumdev_profile-lPFYGt --remote-debugging-pipe --no-startup-window +0ms
  pw:browser <launched> pid=29738 +4ms
[webkit] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading
  pw:browser <launching> /home/bhushan/.cache/ms-playwright/webkit-2003/pw_run.sh --inspector-pipe --headless --no-startup-window +0ms
  pw:browser <launched> pid=29750 +6ms
[firefox] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading
  pw:browser <launching> /home/bhushan/.cache/ms-playwright/firefox-1449/firefox/firefox -no-remote -headless -profile /tmp/playwright_firefoxdev_profile-18b0S9 -juggler-pipe -silent +0ms
  pw:browser <launched> pid=29779 +7ms
  pw:browser [pid=29779][err] *** You are running in headless mode. +25ms
[chromium] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading
  pw:browser [pid=29738][err] [0508/002455.670320:INFO:config_dir_policy_loader.cc(118)] Skipping mandatory platform policies because no policy file was found at: /etc/chromium/policies/managed +97ms
  pw:browser [pid=29738][err] [0508/002455.670377:INFO:config_dir_policy_loader.cc(118)] Skipping recommended platform policies because no policy file was found at: /etc/chromium/policies/recommended +0ms
  pw:browser [pid=29738][err] /snap/core20/current/lib/x86_64-linux-gnu/libstdc++.so.6: version `GLIBCXX_3.4.29' not found (required by /lib/x86_64-linux-gnu/libproxy.so.1) +0ms
  pw:browser [pid=29738][err] Failed to load module: /home/bhushan/snap/code/common/.cache/gio-modules/libgiolibproxy.so +1ms
  pw:browser [pid=29738][err] [0508/002455.677241:WARNING:bluez_dbus_manager.cc(248)] Floss manager not present, cannot set Floss enable/disable. +5ms
[firefox] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading
  pw:browser [pid=29779][err] JavaScript warning: resource://services-settings/Utils.sys.mjs, line 114: unreachable code after return statement +80ms
  pw:browser [pid=29779][out] console.warn: services.settings: Ignoring preference override of remote settings server +5ms
  pw:browser [pid=29779][out] console.warn: services.settings: Allow by setting MOZ_REMOTE_SETTINGS_DEVTOOLS=1 in the environment +1ms
[chromium] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading
  pw:browser [pid=29738][err] [0508/002455.767877:WARNING:sandbox_linux.cc(436)] InitializeSandbox() called with multiple threads in process gpu-process. +91ms
[firefox] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading
  pw:browser [pid=29779][out] console.error: ({}) +255ms
  pw:browser [pid=29779][out]  +15ms
  pw:browser [pid=29779][out] Juggler listening to the pipe +1ms
[webkit] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading
  pw:browser [pid=29750][err] /home/bhushan/.cache/ms-playwright/webkit-2003/minibrowser-wpe/bin/WPENetworkProcess: symbol lookup error: /snap/core20/current/lib/x86_64-linux-gnu/libpthread.so.0: undefined symbol: __libc_pthread_init, version GLIBC_PRIVATE +824ms
[firefox] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading
  pw:browser [pid=29779][out] console.error: ({}) +427ms
  pw:browser [pid=29779][out] console.error: SearchEngineSelector: "Received empty search configuration!" +111ms
  pw:browser [pid=29779][out] console.error: "Received empty top sites configuration!" +73ms
  pw:browser [pid=29779][out] console.error: SearchEngineSelector: "Received empty search configuration!" +10ms
  pw:browser [pid=29779][out] console.error: SearchService: "#init: failure initializing search:" ({}) +0ms
  pw:browser [pid=29779][err] JavaScript error: resource://gre/modules/SearchEngineSelectorOld.sys.mjs, line 118: NS_ERROR_UNEXPECTED: Failed to get engine data from Remote Settings +24ms
  pw:browser [pid=29779][err] JavaScript error: resource://gre/modules/SearchEngineSelectorOld.sys.mjs, line 118: NS_ERROR_UNEXPECTED: Failed to get engine data from Remote Settings +0ms
  pw:browser [pid=29779][err] JavaScript error: resource://gre/modules/SearchEngineSelectorOld.sys.mjs, line 118: NS_ERROR_UNEXPECTED: Failed to get engine data from Remote Settings +0ms
  pw:browser [pid=29779][err] JavaScript error: resource://gre/modules/SearchEngineSelectorOld.sys.mjs, line 118: NS_ERROR_UNEXPECTED: Failed to get engine data from Remote Settings +0ms
[webkit] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading
  pw:browser [pid=29750] <gracefully close start> +225ms
  pw:browser [pid=29750] <process did exit: exitCode=0, signal=null> +12ms
  pw:browser [pid=29750] starting temporary directories cleanup +1ms
  pw:browser [pid=29750] finished temporary directories cleanup +1ms
  pw:browser [pid=29750] <gracefully close end> +0ms
  1) [webkit] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading ─────────────────

    Error: page.goto: WebKit encountered an internal error
    Call log:
      - navigating to "https://meetanshi.in/m2d2", waiting until "load"

      12 |       throw new Error("Please provide the web url");
      13 |     }
    > 14 |     await page.goto(webUrl);
         |                ^
      15 |     const title = page.title();
      16 |     expect(title).not.toContain("error");
      17 |     await use(page);

        at Object.page (/home/bhushan/demostoretesting/test/m2d2.spec.ts:14:16)

    attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
    test-results/m2d2-m2d2-test-cases-Verify-Category-page-Heading-webkit/test-failed-1.png
    ────────────────────────────────────────────────────────────────────────────────────────────────

[firefox] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading
  pw:browser [pid=29779][out] console.error: "Received empty top sites configuration!" +29ms
  pw:browser [pid=29779][out] console.error: WebExtensions:  +45ms
  pw:browser [pid=29779][out]   Message: [Exception... "Failed to get engine data from Remote Settings"  nsresult: "0x8000ffff (NS_ERROR_UNEXPECTED)"  location: "JS frame :: resource://gre/modules/SearchEngineSelectorOld.sys.mjs :: getEngineConfiguration :: line 118"  data: no] +0ms
  pw:browser [pid=29779][out]   Stack: +0ms
  pw:browser [pid=29779][out]     getEngineConfiguration@resource://gre/modules/SearchEngineSelectorOld.sys.mjs:118:24 +0ms
  pw:browser [pid=29779][out]  +0ms
  pw:browser [pid=29779][out] console.error: SearchSettings: "_write: Could not write to settings file:" (new Error("cannot write without any engine.", "resource://gre/modules/SearchSettings.sys.mjs", 277)) +877ms
  pw:browser [pid=29779][out] console.error: URLBar - Provider.UrlbarProviderSearchTips: ({}) +2s
  pw:browser [pid=29779][out] console.warn: LoginRecipes: "Falling back to a synchronous message for: https://meetanshi.in." +3s
  pw:browser [pid=29779][out] console.warn: LoginRecipes: "Falling back to a synchronous message for: https://meetanshi.in." +9ms
  pw:browser [pid=29779][out] console.warn: LoginRecipes: "Falling back to a synchronous message for: https://meetanshi.in." +1ms
  pw:browser [pid=29779][err] JavaScript error: https://meetanshi.in/m2d2/pub/static/frontend/Magento/luma/en_US/requirejs/require.js, line 168: Error: Script error for "Magento_Persistent/js/view/customer-data-mixin" +16ms
  pw:browser [pid=29779][err] https://requirejs.org/docs/errors.html#scripterror +0ms
  pw:browser [pid=29779][err] JavaScript error: https://meetanshi.in/m2d2/pub/static/frontend/Magento/luma/en_US/requirejs/require.js, line 168: Error: Script error for "Magento_Customer/js/customer-data" +2ms
  pw:browser [pid=29779][err] https://requirejs.org/docs/errors.html#scripterror +0ms
  pw:browser [pid=29779][err] JavaScript error: https://meetanshi.in/m2d2/pub/static/frontend/Magento/luma/en_US/requirejs/require.js, line 168: Error: Script error for "Magento_ReCaptchaFrontendUi/js/ui-messages-mixin" +0ms
  pw:browser [pid=29779][err] https://requirejs.org/docs/errors.html#scripterror +0ms
  pw:browser [pid=29779][err] JavaScript error: https://meetanshi.in/m2d2/pub/static/frontend/Magento/luma/en_US/requirejs/require.js, line 168: Error: Script error for "Magento_Ui/js/view/messages" +2ms
  pw:browser [pid=29779][err] https://requirejs.org/docs/errors.html#scripterror +0ms
  pw:browser [pid=29779][out] console.error: URLBar - Provider.UrlbarProviderSearchTips: ({}) +375ms
[chromium] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading
hello
  pw:browser [pid=29738] <gracefully close start> +12s
  pw:browser [pid=29738] <process did exit: exitCode=0, signal=null> +15ms
  pw:browser [pid=29738] starting temporary directories cleanup +0ms
  pw:browser [pid=29738] finished temporary directories cleanup +4ms
  pw:browser [pid=29738] <gracefully close end> +0ms
[firefox] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading
  pw:browser [pid=29779][err] JavaScript warning: resource://gre/modules/UpdateService.sys.mjs, line 3857: unreachable code after return statement +23s
  pw:browser [pid=29779][err] JavaScript error: resource://gre/modules/SearchEngineSelectorOld.sys.mjs, line 118: NS_ERROR_UNEXPECTED: Failed to get engine data from Remote Settings +1s
    pw:browser [pid=29779] <gracefully close start> +3m
  pw:browser [pid=29779] <process did exit: exitCode=0, signal=null> +86ms
  pw:browser [pid=29779] starting temporary directories cleanup +0ms
  pw:browser [pid=29779] finished temporary directories cleanup +7ms
  pw:browser [pid=29779] <gracefully close end> +0ms
  2) [firefox] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading ────────────────

    Test was interrupted.

    Error: locator.click: Target page, context or browser has been closed
    Call log:
      - waiting for locator('//span[normalize-space()="Email Attachments"]')

       at ../pages/Assertions/m2d2_Assertions.ts:21

      19 |   public async navigateToCategoryPage() {
      20 |     await this.page.waitForTimeout(1000);
    > 21 |     await this.getMenuLink.click();
         |                            ^
      22 |     expect(await this.headingText.textContent()).toBe("Email Attachments");
      23 |     await expect(this.page).toHaveTitle("Email Attachments");
      24 |     await expect(this.page).toHaveURL(/.*email-attachments/);

        at m2d2_Assertions.navigateToCategoryPage (/home/bhushan/demostoretesting/pages/Assertions/m2d2_Assertions.ts:21:28)
        at /home/bhushan/demostoretesting/test/m2d2.spec.ts:32:5

    attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
    test-results/m2d2-m2d2-test-cases-Verify-Category-page-Heading-firefox/test-failed-1.png
    ────────────────────────────────────────────────────────────────────────────────────────────────

  Slow test file: [firefox] › m2d2.spec.ts (3.8m)
  Consider splitting slow test files to speed up parallel execution
  1 failed
    [webkit] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading ──────────────────
  1 interrupted
    [firefox] › m2d2.spec.ts:31:8 › m2d2 test cases › Verify Category page Heading ─────────────────
  1 passed (3.9m)

mxschmitt commented 5 months ago

Looks like the minimal reproducible is the following? Please try to run the following to see if that works in WebKit or not.

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

test('basic test', async ({ page }) => {
  await page.goto('https://meetanshi.in/m2d2');
});

If not, please adjust it, so that it surfaces the problem. Ideally without any POM. Also is this is a normal Linux VM (no Docker container etc.)?

bhushantbn commented 5 months ago

Well there is no docker is running for playwright. this is normal Linux VM. I have checked with basic test but still its not working. You can check this in above screenshot.

bhushantbn commented 5 months ago

As I investigated web kit is working in Linux terminal. problem is of vs code terminal. So i will close this issue.

I will recheck this after re installation of vs-code. Thanks!!

microsoft / playwright