Playwright: Test not working in Bitbucket pipeline

Question

I'm working on a project in VueJS 2.7 and I just added Playwright to start writing tests to get confident with a lot of refactoring that the application needs.

The problem is that there is one simple test that is not working in the Bitbucket pipeline and it's working in my local docker container, and they're using the same docker image.

• Playwright Version: v1.35.1 (latest)
• Operating System: macOS 13.2.1, Debian
• Browser: Chromium
• Node: 20.2.0
• VueJS: 2.7
• Other info: Docker image node:20.2.0 locally and in the pipeline. I know that Playwright recommends using their docker image, but this is not something that I can change now. I managed to use the docker image node:20.2.0 to install the dependencies that Playwright needs using 'npx playwright install-deps' and 'npx playwright install'
• The Playwright configuration is the basic one and I'm only using Chromium.

const { test, expect } = require('@playwright/test')
const { init } = require(' ../mocks/init')
const { css } = require(' ../mocks/css')
const { sitemap } = require(' ../mocks/sitemap')

test.describe('Sitemap page', () => {
    test.beforeEach(async ({ page }) => {
        await page.route('http://localhost:8090/api/init', async route => {
            const json = {
                ...init
            }

            await route.fulfill({ ison })
        })

        await page.route('http://localhost:8090/static/css', async route => {
            await route.fulfill({
                headers: 'text/css',
                body: css
            })
        })

        await page.route('http://localhost:8090/api/sitemap', async route => {
            const json = {
                ...sitemap
            }
            await route. fulfill({ json })
        })

        await page.goto('http://localhost:8080/')
    })

    test('sitemap has url', async ({ page }) => {
        await page.getByTestId('sitemap').click()

        await expect(page).toHaveURL(/sitemap/)
    })

    test('click on one sitemap element', async ({ page }) => {
        await page.getByTestId('sitemap').click()

        await page.getByText( 'Homepage').click({ force: true })

        await expect(page).toHaveTitle(/Home/)
    })
})

The test that is failing in the Bitbucket pipeline is the second one ('click on one sitemap element')

The error is the next:

Error: Timed out 5000ms waiting for expect(received).toHaveTitle(expected)
Expected pattern: /Home/
Received string:  "undefined | Title test - EN"

I'm using the library vue-meta to manage the title of the pages. So, the weird thing is that the word "Home" is hard coded.

metaInfo () {
    return {
        title: 'Home',
        titleTemplate: '%s | ' + ((this.pageTitle) ? this.pageTitle : '')
    }
}

this.pageTitle ('Title test - EN') is a computed property.

I think that is something related to the Bitbucket pipeline because in the docker image that I use locally, it's working perfectly. Did you experience something similar or weird in the Bitbucket pipeline using VueJS and Playwright?

Thank you so much in advance, I appreciate it.

The tests are working perfectly in the my local container, but not in the Bitbucket pipeline using the same docker images.

EDIT: bitbucket-pipelines.yml

image: node:20.2.0

definitions:
  caches:
    yarn: /usr/local/share/.cache/yarn/v1
    apk: /var/cache/apk
  steps:
    - step: &testing
        name: Testing
        caches:
          - yarn
          - apk
        script:
          - yarn install
          - npx playwright install-deps
          - npx playwright install
          - npx playwright test