Handle HTTP Authentication in Playwright

In Playwright you can handle basic HTTP authentication popup using multiple ways, few of them, we have discussed in this article.

Table of Contents

1. Demo Website
2. Use HTTP credentials in URL
3. Use HTTP credentials in Test
4. Use SetHTTPCredentials Method
5. Use HTTP credentials in Config
6. Video Tutorial

Demo Website

For demo refer HerokuApp Basic Auth

Here you will find Sign in popup where you can fill in admin value for both username and password, and once you click on Sign In button, You will see Basic Auth Heading. 

Use HTTP Credentials in URL

The simplest and most straight forward way is to put your username and password right in front of the web address (URL).

Step 1: Add credentials in URL and visit URL

in test case

await page.goto("https://admin:admin@the-internet.herokuapp.com/basic_auth");

or in config file

 baseURL: 'https://admin:admin@the-internet.herokuapp.com/basic_auth/',

await page.goto("/");

Step 2: Verify Basic Auth heading

await expect(page.locator("div.example>h3")).toHaveText("Basic Auth")

Code

test('HTTP Authentication URL', async ({ page }) => {
    await page.goto("https://admin:admin@the-internet.herokuapp.com/basic_auth");
    await expect(page.locator("div.example>h3")).toHaveText("Basic Auth")
})

Use HTTP Credential in Test

In Playwright you can handle HTTP authentication popup at test case level by passing HTTP Credentials as an option while creating browser context.

Step 1: Use browser instance instead of page instance in test parameter

test('Basic Auth Demo', async ({ browser }) => {
})

Step 2: Create browser context variable and pass in httpCredentials as an option. In httpCredentials JSON pass your username and password.

const context = await browser.newContext(
  {
    httpCredentials:
    {
      username: 'admin',
      password: 'admin'
    }  
  })

Step 3: Create page Instance

const page  = await context.newPage();

Step 4: Visit the URL

await page.goto("https://the-internet.herokuapp.com/basic_auth");

Step 5: Verify Basic Auth Heading

await expect(page.locator("div.example>h3")).toHaveText("Basic Auth");

Code

test.only('Basic Auth Demo', async ({ browser }) => {
  
  const context = await browser.newContext(
  {
    httpCredentials:
    {
      username: 'admin',
      password: 'admin'
    }  
  })

  const page  = await context.newPage();
  await page.goto("https://the-internet.herokuapp.com/basic_auth")
  await expect(page.locator("div.example>h3")).toHaveText("Basic Auth")
})

Use SetHTTPCredential Method

Note: This method is deprecated

test('Set HTTP Credentials', async ({ browser }) => {
  const context = await browser.newContext();

  await context.setHTTPCredentials({username: 'admin', password: 'admin'});
  const page = await context.newPage();
  await page.goto("");
  await expect(page.locator("div.example>h3")).toHaveText("Basic Auth");
})

Use HTTP Credential in Config File

The method we discussed earlier was for handling the authentication for just one test case. However, usually, we need to handle it for all test cases unless there's a special case. In that case, we can set up this authentication at the configuration level. Here are the steps to do that:

Step 1: Add http credentials JSON inside use section

use: {
    httpCredentials: {
      username: 'admin',
      password: 'admin',
    }

Step 2: Visit URL

To visit from config file

await page.goto("/");

For heroku app, we are visiting other page than homepage so use 

await page.goto("");

To visit direct URL

await page.goto("https://the-internet.herokuapp.com/basic_auth");

Step 3: Verify Basic Auth Heading

await expect(page.locator("div.example>h3")).toHaveText("Basic Auth")

Code

 test.only('Config Basic Auth Demo', async ({ page }) => {
    // await page.goto("https://the-internet.herokuapp.com/basic_auth");
    // await page.goto("/");
    await page.goto("");
    await expect(page.locator("div.example>h3")).toHaveText("Basic Auth");
  })