[Question] Global setup failing in Azure Pipelines

[JuliusMoehring]

Hi, its my first time using Playwright in combination with Azure DevOps and I am stuck making the tests run in the pipeline.

I have followed the documentation about CI and Azure Pipelines, but I still can make it run.

I am using a globalSetup.ts file to login before running the tests.

import { chromium, expect } from '@playwright/test';

const globalSetup = async () => {
    const browser = await chromium.launch({ headless: true });
    const page = await browser.newPage();

    await page.goto('http://localhost:3000');

    // DO ALL THE LOGIN STUFF HERE    

    // Save signed-in state to 'storageState.json'.
    await page.context().storageState({ path: './tests/playwright/storageState.json' });

    await browser.close();
};

export default globalSetup;

In the pipeline, I get a nice message from Playwright Team

╔════════════════════════════════════════════════════════════════════════════════════════════════╗
║ Looks like you launched a headed browser without having a XServer running.                     ║
║ Set either 'headless: true' or use 'xvfb-run <your-playwright-app>' before running Playwright. ║
║                                                                                                ║
║ <3 Playwright Team                                                                             ║
╚════════════════════════════════════════════════════════════════════════════════════════════════╝

But when checking back on my globalSetup.ts, I am starting chrome in headless mode already.

Does anybody know, why chromium.launch({ headless: true }); is not launching the browser in headless mode?

Thanks for your help

Julius

[tymfear]

Maybe setup script works fine, but then, when actual tests are executed, browser is launched in headed mode? Could you share your PW config?

[JuliusMoehring]

Thanks for the quick response. This is how my config looks like:

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

/**
 * See https://playwright.dev/docs/test-configuration.
 */
const config: PlaywrightTestConfig = {
    testDir: './tests/playwright',
    /* Maximum time one test can run for. */
    timeout: 30 * 1000,
    expect: {
        /**
         * Maximum time expect() should wait for the condition to be met.
         * For example in `await expect(locator).toHaveText();`
         */
        timeout: 5000,
    },

    /* 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: 2,

    /* Opt out of parallel tests on CI. */
    workers: 1,

    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
    reporter: 'html',

    /* Run this global setup file before starting a test session */
    globalSetup: './tests/playwright/globalSetup',

    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
    use: {
        /* Render UI when running tests */
        headless: true,

        /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
        actionTimeout: 0,

        /* Base URL to use in actions like `await page.goto('/')`. */
        baseURL: 'http://localhost:3000',

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

        /* Create video when retrying the failed test */
        video: 'on-first-retry',

        /* Make data-test elements accessible for playwright */
        testIdAttribute: 'data-test',

        /* Store authentication credentials */
        storageState: './tests/playwright/storageState.json',
    },

    /* Configure projects for major browsers */
    projects: [
        {
            name: 'chromium',
            use: {
                ...devices['Desktop Chrome'],
                viewport: {
                    width: 1920,
                    height: 1080,
                },
            },
        },
    ],

    /* Folder for test artifacts such as screenshots, videos, traces, etc. */
    outputDir: 'test-results/',

    webServer: {
        command: 'npm run dev',
        port: 3000,
        timeout: 120 * 1000,
        reuseExistingServer: false,
    },
};

export default config;

I think I should have added more logs to the question itself. This is also part of logs I get:

at globalSetup.ts:4

  2 |
  3 | const globalSetup = async () => {
> 4 |     const browser = await chromium.launch({ headless: true });
    |                                    ^
  5 |     const page = await browser.newPage();
  6 |
  7 |     await page.goto('http://localhost:3000');/

    at globalSetup (file:///__w/1/s/tests/playwright/globalSetup.ts:4:36)

[yury-s]

Yeah, this code should launch in headless mode. Can you run with DEBUG=pw:browser environment variable and paste here the full log starting with command line that you use to launch playwright?

[JuliusMoehring]

I am super sorry, I just noticed that I did a mistake when copying over the cli command from the package.json. I forgot to remove the --debug flag, which of cause is overriding everything else. Sorry for that and thanks again for the help!