Writing Integration Tests with Playwright

import { PlaywrightTestConfig, devices } from '@playwright/test';
import path from 'path';
 
// Use process.env.PORT by default and fallback to port 3000
const PORT = process.env.PORT || 3000;
 
// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
const baseURL = `http://localhost:${PORT}`;
 
// Reference: https://playwright.dev/docs/nextjs/v2/test-configuration
const config: PlaywrightTestConfig = {
  // Timeout per test
  timeout: 120 * 1000,
  // Test directory
  testDir: path.join(__dirname, 'e2e'),
  // If a test fails, retry it additional 2 times
  retries: 2,
  // Artifacts folder where screenshots, videos, and traces are stored.
  outputDir: 'test-results/',
 
  // Run your local dev server before starting the tests:
  // https://playwright.dev/docs/nextjs/v2/test-advanced#launching-a-development-web-server-during-the-tests
  webServer: {
    command: 'cross-env NODE_ENV=test next dev',
    url: baseURL,
    timeout: 120 * 1000,
    reuseExistingServer: !process.env.CI,
  },
 
  use: {
    // Use baseURL so to make navigations relative.
    // More information: https://playwright.dev/docs/nextjs/v2/api/class-testoptions#test-options-base-url
    baseURL,
 
    // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
    // More information: https://playwright.dev/docs/nextjs/v2/trace-viewer
    trace: 'retry-with-trace',
 
    actionTimeout: 60 * 1000,
 
    // All available context options: https://playwright.dev/docs/nextjs/v2/api/class-browser#browser-new-context
    // contextOptions: {
    //   ignoreHTTPSErrors: true,
    // },
  },
 
  projects: [
    {
      name: 'with-auth',
      testMatch: 'auth/**/*.setup.ts',
    },
    {
      name: 'Logged In Users (Desktop Chrome)',
      testMatch: /.*user.spec.ts/,
      retries: 0,
      dependencies: ['with-auth'],
      use: {
        ...devices['Desktop Chrome'],
        storageState: 'playwright/.auth/user.json',
      },
    },
    {
      name: 'Logged Out Users (Desktop Chrome)',
      testIgnore: /.*user.spec.ts/,
      use: {
        ...devices['Desktop Chrome'],
      },
    },
  ],
  globalSetup: './playwright/global-setup.ts',
};
export default config;

pnpm test:e2e --ui

pnpm test:e2e

test('create organization works correctly', async ({ page }) => {
  // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
  await page.goto('/dashboard');
 
  // click button with role combobox and data-name "organization-switcher"
  await page.click(
    'button[role="combobox"][data-name="organization-switcher"]',
  );
 
  // click button with text New Organization
  await page.click('button:has-text("New Organization")');
 
  // wait for form within a div role dialog to show up with data-testid "create-organization-form"
  const form = await page.waitForSelector(
    'div[role="dialog"] form[data-testid="create-organization-form"]',
  );
 
  // find input with name "name" and type "Lorem Ipsum"
  const input = await form.waitForSelector('input[name="name"]');
 
  if (!input) {
    throw new Error('input not found');
  }
 
  await input.fill('Lorem Ipsum');
 
  // click on button with text "Create Organization"
 
  const submitButton = await form.waitForSelector(
    'button:has-text("Create Organization")',
  );
 
  if (!submitButton) {
    throw new Error('submitButton not found');
  }
 
  await submitButton.click();
 
  // wait for url to change to /organization/<organizationUUID>
 
  let organizationId;
  await page.waitForURL((url) => {
    const match = url
      .toString()
      .match(
        /\/organization\/([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12})/,
      );
    if (match) {
      organizationId = match[1];
      return true;
    }
    return false;
  });
 
  if (!organizationId) {
    throw new Error('organizationId creation failed');
  }
 
  // go to /organization/<organizationUUID>/settings
 
  const settingsPageURL = `/organization/${organizationId}/settings`;
  await page.goto(settingsPageURL);
 
  // wait for data-testid "edit-organization-title-form"
  const editOrganizationTitleForm = await page.waitForSelector(
    'form[data-testid="edit-organization-title-form"]',
  );
 
  // fill input with name "organization-title"
  const titleInput = await editOrganizationTitleForm.waitForSelector(
    'input[name="organization-title"]',
  );
  if (!titleInput) {
    throw new Error('titleInput not found');
  }
 
  await titleInput.fill('Lorem Ipsum 2');
 
  // click on button with text "Update"
  const updateButton = await editOrganizationTitleForm.waitForSelector(
    'button:has-text("Update")',
  );
 
  if (!updateButton) {
    throw new Error('updateButton not found');
  }
 
  await updateButton.click();
 
  // wait for text "Organization title updated!"
 
  await page.waitForSelector('text=Organization title updated!');
});