How to automate browser-based digest auth dialog triggered after file upload

[UrvashiBhatt-eaton]

Hey folks,
I’m using Serenity/JS with Playwright and running into a Digest Authentication issue. The popup doesn’t show up when the page loads, but as soon as I click a button to upload a file, the browser’s built‑in Digest Auth dialog appears asking for username/password.

Has anyone automated this kind of dynamic Digest Auth popup with Serenity/JS + Playwright?
I’m wondering if the right approach is:

• Using Playwright’s httpCredentials option in the browser context to pre‑supply Digest credentials
• Intercepting the network request triggered by the file upload and attaching the Authorization header manually
• Or if there’s a Serenity/JS‑specific pattern for handling Digest Auth popups after an action

Any tips or examples would be super helpful!

[jan-molak]

If you're using Serenity/JS with Playwright Test, using the httpCredentials option is the easiest way to provide the credentials needed to authenticate the request.

Using the Playwright Test config file

You can configure httpCredentials in your Playwright Test config file:

import { defineConfig } from '@playwright/test'
import { SerenityFixtures, SerenityWorkerFixtures } from '@serenity-js/playwright-test'

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig<SerenityFixtures, SerenityWorkerFixtures>({
  use: {
    httpCredentials: {
      username: 'user', // or read the value from process.env
      password: 'pass',
    },
  },
})

Using this approach ensures that whenever your server under test requires HTTP authentication, Playwright provides the credentials.

Scenario-specific configuration

Alternatively, you can configure httpCredentials directly in your spec file to limit the framework to provide the credentials only when running the scenarios that need them:

import { describe, it, test } from '@serenity-js/playwright-test'

describe('Device maintenance', () => {

  describe('Firmware', () => {

    test.use({
      httpCredentials: {
        username: 'user', // or read then from process.env
        password: 'pass',
      }
    })
    
    it('allows the user to update firmware', async ({ actor }) => {
      await actor.attemptsTo(
        DeviceMaintenancePage.open(),
        DeviceMaintenancePage.uploadFirmware('./firmware/FUS-Example-H743.I.Signed.xml'),
      )
    })
  })
})

Request interception

If you need to vary the credentials per test or per route, you can provide the Authorization header dynamically by intercepting the specific request.

Conveniently, the default Serenity/JS actor is bound to the default Playwright Test page, so you can configure page.route interception before handing over to the actor:

import { describe, it, test } from '@serenity-js/playwright-test'

describe('Device maintenance', () => {

  describe('Firmware', () => {
    
    it('allows the user to update firmware', async ({ actor, page }) => {
      await page.route('**/firmware/*', async (route, request) => {
        const headers = {
          ...request.headers(),
          Authorization: 'Bearer YOUR_TOKEN_HERE',
          // or e.g. 'Basic base64(user:pass)'
        };
      
        await route.continue({ headers });
      })
    
      await actor.attemptsTo(
        DeviceMaintenancePage.open(),
        DeviceMaintenancePage.uploadFirmware('./firmware/FUS-Example-H743.I.Signed.xml'),
      )
    })
  })
})