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

Answer

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;

2. 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' });
});

3. 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
});

4. 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.