CODEWITHSUNDEEP
typescripttestingplaywright
Patrick Kenny
Patrick Kenny

Reputation: 6467

How to get Playwright to use the value for headless in my config file?

I'm new to Playwright and I can't get it to pick up my config file for some reason.

Here are the problems:

I am guessing all of these problems are related to the fact that my config file is not being picked up properly (because the browser is run headless even though headless is set to false.)

I'm on Ubuntu 20.04 via WSL2. Playwright 1.12.2

Command for running the test:

npx playwright test test.ts

This shows me running the correct config file:

Using config at /myapp/tests/playwright/playwright.config.ts

Just in case, I also tried specifying the config file manually:

npx playwright test test.ts --config=playwright.config.ts

In both cases, though, the browser is run headless even though headless is false in the config file.

playwright.config.ts:

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

const config: PlaywrightTestConfig = {
  use: {
    headless: false,

    // Artifacts
    screenshot: 'on',
    video: 'on',
  },
};
export default config;

test.ts:

// @ts-check
import {
  chromium, devices, expect, test,
} from '@playwright/test';

const iPhone11 = devices['iPhone 11 Pro'];

const baseUrl = 'http://localhost:8100/';

test('Check the onboarding flow', async () => {
  const browserChromium = await chromium.launch();

  // Decide which browser to use.
  const browser = browserChromium;
  const context = await browser.newContext({
    ...iPhone11,
    locale: 'ja-JP',
    recordVideo: {
      dir: 'recordings/',
    },
  });
  const page = await browser.newPage();
  // Set default navigation timeout.
  page.setDefaultTimeout(10000);
  // Go to baseUrl
  await page.goto(baseUrl);
  // Go to baseUrl/webapp/
  await page.goto(`${baseUrl}webapp/`);
  await page.screenshot({ path: 'test-screenshot.png' });
  await context.close();
  await browser.close();
});

Upvotes: 7

Views: 61287

Answers (1)

Max Schmitt
Max Schmitt

Reputation: 3222

When using the new Playwright test-runner, the browser, context, and page instances are already created for you. There is a context for each test to ensure that the tests are working isolated, see here for reference. And the context/launch options are then set in your playwright.config.ts.

In your scenario it would mean, something like that should work:

// @ts-check
import {
  expect, test,
} from '@playwright/test';

const baseUrl = 'http://localhost:8100/';

test('Check the onboarding flow', async ({ page }) => {
  // Go to baseUrl
  await page.goto(baseUrl);
  // Go to baseUrl/webapp/
  await page.goto(`${baseUrl}webapp/`);
  await page.screenshot({ path: 'test-screenshot.png' });
});

the launch and context options, you can set in your playwright.config.ts as follows:

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

const config: PlaywrightTestConfig = {
  use: {
    ...devices['iPhone 11 Pro'],
    headless: false,

    // Artifacts
    screenshot: 'on',
    video: 'on',
    contextOptions: {
      locale: 'ja-JP',
    }
  },
};
export default config;

See here for further information about configuration.

Upvotes: 12

Related Questions