Playwright getting started using existing browser - unclear what to do

Question

I want to write tests for an existing web application (for example vanilla todo mvc) with playwright. So i started playwright getting started with

npm init playwright@latest new-project

But it does not work for me because the installation of browsers fails:

Downloading browsers (npx playwright install)…
Failed to install browsers

I quess that our corporate firewall prevents to download browsers. Luckily playwright also offers to use existing browsers

current Playwright version will support Stable and Beta channels of these browsers (chrome, msedge)

But it is unclear to me how i can create a playwright project and where to put the given configuration lines

// @ts-check

/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
  use: {
    channel: 'chrome',
  },
};

module.exports = config;

Questions

1. What do i have to do to create a playwright project using existing browser?
2. Where do i have to put the provided config lines?
3. How do i run the tests?

Answer 1

In your playwright.config.ts file (or js, it does not matter on this regard) you should see those lines, which are nothing but your playwright configuration. In "use", add 'chrome' as channel and remove any projects you may have specified in your config. It should be fine. Your config file with a very minimal configuration could look something like this:

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

const config: PlaywrightTestConfig = {
    testDir: './tests',
    timeout: 30 * 1000,
    expect: {
        timeout: 5000
    },
    use: {
        channel: 'chrome'
    }
};

export default config;