How to get Playwright to use the config file from my pipeline

Question

Background

I have a Playwright test I can run locally with VS Code in all 3 browser engines: Chromium, Firefox, and WebKit. The tests succeed running against both the locally running app and the app deployed to pre-production environments.

The test:

test('that clicking link navigates to the next page', async ({ page }) => {

  await page.goto('/relative/url');
  await page.locator('hyperlink:has-text("relative url")').getByRole('link').click();
  await page.waitForNavigation();

  await expect(page).toHaveURL('https://www.example.com/relative/url');
});

The partial Playwright.config.ts file:

use: {
    ...
    baseURL: 'https://www.example.com',
    ...
  },

The app structure:

- My app
    - Deployment
        - azure-pipelines.yml
    - src
    - tests
    - playwright.config.ts

The Azure DevOps pipeline stage, most of which was copied from the Playwright Azure pipelines documentation

  - stage: PlaywrightTests
    dependsOn: 
      - PreprodDeployment
    jobs:
      - deployment: PlaywrightTests
        pool:
          vmImage: ubuntu-20.04
        container: mcr.microsoft.com/playwright:v1.27.0-focal
        environment: testing
        strategy:
          runOnce:
            deploy:
              steps:
              - checkout: self
              - task: NodeTool@0
                inputs:
                  versionSpec: '16.13.0'
              - task: Bash@3
                displayName: 'Run Playwright tests'
                inputs:
                  workingDirectory: 'tests'
                  targetType: 'inline'
                  failOnStderr: true
                  # env:       # Unexpected property. Fails pipeline.
                    # CI: true
                  script: |
                    npm install
                    npx playwright test

Problem

However, when Playwright runs my tests from the Azure DevOps pipeline, the test fails.

The pipeline failure:

1) links.spec.ts:3:1 › that clicking link navigates to the next page ===============

    page.goto: Protocol error (Page.navigate): Cannot navigate to invalid URL
    =========================== logs ===========================
    navigating to "/relative/url", waiting until "load"
    ============================================================

      3 | test('that clicking link navigates to the next page', async ({ page }) => {
      4 |
    > 5 |   await page.goto('/relative/url');
        |              ^
      6 |   await page.locator('hyperlink:has-text("relative url")').getByRole('link').click();
      7 |   await page.waitForNavigation();
      8 |

        at /__w/1/s/tests/links.spec.ts:5:14


  1 failed
    links.spec.ts:3:1 › that clicking link navigates to the next page ================

##[error]Bash exited with code '1'.

I can see that the pipeline is not using the baseURL value from the playwright.config.ts file.

Question

How do I fix the azure-pipeline.yml so that it uses playwright.config.ts's baseURL value?

Answer 1

Playwright needs to be run from the folder that contains the playwright.config.ts file.

Trying changing your workingDirectory of your Bash step to './'