How do I manage Single Sign-On (SSO) authentication in a CI/CD pipeline using Playwright?

Answer

To manage SSO authentication in a CI/CD pipeline using @playwright/test, follow these steps:

1. Create auth.setup.ts

Prepare authenticated browser state for all tests.

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

test('authenticate', async ({ browser }) => {
  // Your authentication logic here
});

2. Use parallelIndex as a unique identifier

Each worker gets a unique parallelIndex.

const parallelIndex = test.workerIndex;

3. Acquire a unique account

Use a unique account or a list of precreated accounts for testing.

const account = accounts[parallelIndex];

4. Perform login steps

Fill in the username/password fields and submit the form.

await page.fill('#username', account.username);
await page.fill('#password', account.password);
await page.click('#submit');

5. Wait for cookies

Wait until the final URL is reached or a specific element is visible.

await page.waitForSelector('#loggedInElement');

6. Save storageState

Save the authenticated state to a file.

const authFile = `playwright/.auth/state-${parallelIndex}.json`;
await context.storageState({ path: authFile });

7. Create a setup project

Declare the setup project as a dependency for all testing projects in your playwright.config.ts.

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  projects: [
    {
      name: 'auth-setup',
      testMatch: 'auth.setup.ts',
    },
    {
      name: 'tests',
      testMatch: '*.spec.ts',
      dependsOn: ['auth-setup'],
    },
  ],
};

export default config;

8. Reuse authenticated state

Use the saved storageState in your tests.

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

test.use({
  storageState: `playwright/.auth/state-${test.workerIndex}.json`,
});

test('example test', async ({ page }) => {
  // Your test logic here
});

By following these steps, you can efficiently handle SSO authentication in your CI/CD pipeline using @playwright/test.