[Question] How to use the HttpCredential when using native PW runner with config file ?

[amrsa1]

I have a website, that user have to fill a pop up for basic authentication before continue navigating the app.

this is cause PW to fail right away upon starting the test due to the error shown below

page.goto: net::ERR_INVALID_AUTH_CREDENTIALS at https://beta.test.ae/en/
=========================== logs ===========================
navigating to "https://beta.moneypark.ch/en/", waiting until "load"
============================================================
    at openPage (/Users/amrsa/Desktop/pw/node_modules/playwright-core/lib/cli/cli.js:397:16) {
  name: 'Error'
}
The terminal process "zsh '-c', 'npm run inspect'" terminated with exit code: 1.

also inspect tool will fail for the same reason, i was trying to add httpCredential to my test but I'm not using context, my test look like the following

import { expect, test, Page } from '@playwright/test';
import { PublicSearch, configList } from '../../pages/exporter'

let page: Page;
let ps: PublicSearch;

test.describe('Public Search Test Suite', () => {

    test.beforeEach(async ({ browser }) => {
        page = await browser.newPage()
        ps = new PublicSearch(page)
        await ps.open()
    });

    test('any thing ', async () => {
        await ps.test('', '')
    });

now sure how to manage this, was thinking if there is an option to pass these credential in the config file.

[mxschmitt]

You can add it to your "use section" of the config:

      name: 'chromium',
      use: {
        browserName: 'chromium',
        httpCredentials: {
          username: 'admin',
          password: 'foobar',
        }
      },

see here: https://playwright.dev/docs/api/class-testoptions#test-options-http-credentials

[amrsa1]

i have already tried that, but didnt make any difference

[mxschmitt]

which version of Playwright Test are you using? (try 1.18.0) Would it be possible to demonstrate this bug in form of a small repro?

[manuelriveragax]

This is the only way I managed to get it working

POM

import { Locator, Page, Browser, BrowserContext } from "@playwright/test";

 export class PageObject {
    readonly page: Page;
    readonly browser: Browser;
    readonly context: BrowserContext;

    constructor(page: Page, browser: Browser, context: BrowserContext) {
      this.page = page;
      this.browser = browser;
      this.context = context;
  }

    async goToHome() {
      await this.page.goto("randomUrl");
  }
}

Test file

import { test, expect } from "@playwright/test";
import { PageObject } from "../path"

test.describe("Login", () => {
  let pageObject: PageObject ;

  test.beforeEach(async ({ browser }, testInfo) => {
    const context = await browser.newContext({
      httpCredentials: {
        username: "username",
        password: "password",
      },
    });

    const page = await context.newPage();

    pageObject= new PageObject(page, browser, context);
    await pageObject.goToHome();
  });

  test.afterEach(async ({}, testInfo) => {
    pageObject.page.close();
  });

  test("Your test here", async ({page}) => {
    await pageObject.doSomeThing();
  });
});

It works but, it opens an empty browser with each test and I can't figure out why 🤣

[mxschmitt]

test("Your test here", async ({page}) => {

this does access the page which Playwright Test will give you by default, its different to the page you are creating manually. So if you remove this it does not end up in multiple pages at the same time.

pageObject.page.close();

You should also close the context or do e.g. await pageObject.page.context().close();

[amrsa1]

@mxschmitt

its working now fine

    use: {
        trace: 'retain-on-failure',
        video: configList.video,
        baseURL: configList.baseURL,
        httpCredentials: {
            username: 'amr.',
            password: 'test!',
          },
    },

but still not able to use the playwright inspector since there is no option to pass these credential, it might be good if we can have some flag/option to be passed within the cli command, or json file with config to passed in the cli command

playwright codegen https://beta.test.ch/ --->playwright codegen --httpCred="$username","$passsword" --url=https://beta.test.ch/

[mxschmitt]

awesome, you could use codegen with a custom setup see here: https://playwright.dev/docs/cli#codegen-with-custom-setup

TL;DR: You launch any Playwright browser and call page.pause() then you are able to inspect the page and/or use the codegen.

Closing since the original issue is solved now. If codgen does not work, please file a separate issue.