How do I implement authentication in a Cucumber with JavaScript on Playwright project?


Implementing Authentication in a Cucumber with JavaScript on Playwright Project

To add authentication, follow these steps:

  1. Create a setup project: Declare a new setup project in the config as a dependency for all your testing projects. This project will run and authenticate before all tests.
// playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  projects: [
      name: 'Setup',
      testDir: 'setup',
      use: { storageState: 'path/to/storage.json' },
    // Other test projects

export default config;
  1. Perform authentication: In the setup project, perform authentication steps. The example below shows GitHub login, but you can modify it for your needs.
// setup/authenticate.spec.ts
import { test } from '@playwright/test';

test('Authenticate', async ({ page }) => {
  await page.goto('https://ray.run/login');
  await page.fill('#login_field', 'your-username');
  await page.fill('#password', 'your-password');
  await page.click('input[type="submit"]');
  await page.waitForNavigation();
  await page.context().storageState({ path: 'path/to/storage.json' });
  1. Specify storageState: Instead of setting it in the config, specify storageState for each test file or test group using test.use({ storageState: 'path/to/storage.json' }).
// tests/example.spec.ts
import { test } from '@playwright/test';

test.use({ storageState: 'path/to/storage.json' });

test('Example test', async ({ page }) => {
  await page.goto('https://ray.run/dashboard');
  // Your test steps
  1. Test multiple roles: If you need to test multiple roles together, use multiple BrowserContexts and Pages with different storage states to simulate different users interacting with each other.

By following these steps, you can implement authentication in a Cucumber with JavaScript on Playwright project.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.