Rayrun
← Back to Discord Forum

Login fails in UI Mode but works fine in "normal" mode (or in vsc)

Hi! I just started with playwright and i am currently trying to get the Global setup (for login) to work. I followed this example: https://playwright.dev/docs/test-global-setup-teardown#option-1-project-dependencies When i start the tests from within vs code (normal or debug) everything works fine and also with npx playwright test. But when i try it in UI mode (npx playwright test --ui) the setup works but the following tests get stuck because it is not logged in. Am i missing something?

projects: [
    {
      name: 'setup',
      testMatch: /global.setup\.ts/,
    },
    {
      name: 'kst chrome',
      testMatch: 'kst/*.spec.ts',
      dependencies: ['setup'],
      use: {
        ...devices['Desktop Chrome'],
        viewport: { width: 1280, height: 720 },
        storageState: STORAGE_STATE,
      },
    },
import { test as setup, expect } from '@playwright/test';
import { STORAGE_STATE } from '../playwright.config';

setup('do login', async ({ page }) => {

     await page.goto(process.env.BASE_URL as string);
     await page.fill('input[id="userName"]', process.env.EMAIL as string);
     await page.click('a[class="next-btn"]');
     await expect(page.locator('input[id="password"]')).toBeVisible();
     await page.fill('input[id="password"]', process.env.PASSWORD as string);
     await page.click('a[data-testid="login-submit-btn"]');
     await page.getByTestId('maintenance-window-close').click();
     await expect(page.locator('img[alt="logo"]')).toBeVisible();

     await page.context().storageState({ path: STORAGE_STATE });

});
vscTest.png
UITest.png

This thread is trying to answer question "Why does the global setup for login fail in UI mode but work fine in normal or debug mode in playwright?"

2 replies

{ name: "global", ** testDir: "./",** testMatch: "global.setup.ts" }, probably you're missing testDir for global setup

@4m3r1984: Sorry i only copied parts of my config, here is the rest of the file: ``` import { defineConfig, devices } from '@playwright/test'; import path from 'path'; /** * Read environment variables from file. * https://github.com/motdotla/dotenv */ require('dotenv').config(); export const STORAGE_STATE = path.join(__dirname, 'playwright/.auth/user.json'); export default defineConfig({ testDir: './tests', /* Run tests in files in parallel */ fullyParallel: true, /* Fail the build on CI if you accidentally left test.only in the source code. */ forbidOnly: !!process.env.CI, /* Retry on CI only */ retries: process.env.CI ? 2 : 0, /* Opt out of parallel tests on CI. */ workers: process.env.CI ? 1 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: 'html', /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { /* Base URL to use in actions like `await page.goto('/')`. */ baseURL: 'http://localhost:34015/', /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', }, /* Configure projects for major browsers */ projects: [ { name: 'setup', testMatch: /global.setup\.ts/, }, { name: 'kst chrome', testMatch: 'kst/*.spec.ts', dependencies: ['setup'], use: { ...devices['Desktop Chrome'], viewport: { width: 1280, height: 720 }, storageState: STORAGE_STATE, }, }, { name: 'kst firefox', testMatch: 'kst/*.spec.ts', dependencies: ['setup'], use: { ...devices['Desktop Firefox'], viewport: { width: 1280, height: 720 }, storageState: STORAGE_STATE, }, } ```

Sorry i only copied parts of my config, here is the rest of the file:

import { defineConfig, devices } from '@playwright/test';
import path from 'path';

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */
require('dotenv').config();

export const STORAGE_STATE = path.join(__dirname, 'playwright/.auth/user.json');

export default defineConfig({
  testDir: './tests',
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    baseURL: 'http://localhost:34015/',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'setup',
      testMatch: /global.setup\.ts/,
    },
    {
      name: 'kst chrome',
      testMatch: 'kst/*.spec.ts',
      dependencies: ['setup'],
      use: {
        ...devices['Desktop Chrome'],
        viewport: { width: 1280, height: 720 },
        storageState: STORAGE_STATE,
      },
    },
    {
      name: 'kst firefox',
      testMatch: 'kst/*.spec.ts',
      dependencies: ['setup'],
      use: {
        ...devices['Desktop Firefox'],
        viewport: { width: 1280, height: 720 },
        storageState: STORAGE_STATE,
      },
    }

Related Discord Threads

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