[BUG] TypeError: Cannot read properties of undefined (reading 'project') when adding projects to playwright.config.js

[senn]

We have a working playwright setup for which we are using a custom reporter by a 3rd party.
This reporter requires the playwright config to use projects.

Whenever we add this to our config (in the use object):

projects: [
    {
        name: 'Automated Playwright tests',
    },
],

we encounter the following error: TypeError: Cannot read properties of undefined (reading 'project') when adding projects to playwright.config.js.

The error seems to be coming from PW itself, as even without our custom reporter, the error pops up when we add the projects to the config.

Reproducible on PW version 1.50.

Is there maybe a specific property that is expected in project objects, that we're missing?
We have tried adding quite a few properties, but can't seem to get solve the error. We've tried -on top of name- title, use, devices, ...

Full config:

/* global process */

// Prepare Playwright launch arguments
const launchArgs = ['--disable-dev-shm-usage', '--disable-gpu'];
if ('LOCAL' === process.env.ENVIRONMENT) {
    // Ignore certificate errors on local
    launchArgs.push('--ignore-certificate-errors');
}

// Prepare Playwright reporters - dedicated Zephyr reporter when env variable is set
let reporters;
if ('true' === process.env.PLAYWRIGHT_ZEPHYR_REPORTING_ENABLED) {
    reporters = [
        ['list'],
        [
            '@y9f-zephyr/reporter',
            {
                auth: {
                    username: process.env.PLAYWRIGHT_ZEPHYR_USERNAME,
                    password: process.env.PLAYWRIGHT_ZEPHYR_PASSWORD,
                    PatId: process.env.PLAYWRIGHT_ZEPHYR_PAT_ID,
                },
                zephyr: {
                    projectKey: process.env.PLAYWRIGHT_ZEPHYR_PROJECT,
                    testPlanKey: process.env.PLAYWRIGHT_ZEPHYR_TESTPLAN,
                    environment: process.env.ENVIRONMENT,
                },
            },
        ],
    ];
} else {
    reporters = [
        ['junit',
            {
                // Place the junit results somewhere our Jenkins pipeline will look for them
                outputFile: 'e2e/results/junit-results.xml',
                stripANSIControlSequences: true,
            },
        ],
        ['list'],
    ];
}

export default {
    use: {
        projects: [
            {
                name: 'Automated Playwright tests',
            },
        ],
        channel: 'chrome',
        headless: true,
        screenshot: 'only-on-failure',
        video: 'on-first-retry',
        ignoreHTTPSErrors: true,
        contextOptions: {
            reducedMotion: 'reduce',
        },
        launchOptions: {
            executablePath: process.env.CHROMIUM_BIN,
            args: launchArgs
        },
        trace: 'retain-on-failure'
    },
    workers: 1,
    updateSnapshots: 'missing',
    reporter: reporters,
    retries: 1,
    testDir: 'e2e/specs',
    snapshotDir: 'e2e/snapshots',
    testMatch: '**/*.spec.js',
    outputDir: 'e2e/results',
};

[agg23]

Please provide a full repo with a reproduction. I am not able to trivally produce your issue.

Two things I noticed: You're not using defineConfig as seen here. projects is a key on the root object, not under use.

[senn]

I just tried it with projects on the root object - same result.
Moved use into projects as a test - same result.

I'll see if I can extract a standalone repo...

[senn]

Here's a small repo where I am able to reproduce it: https://github.com/senn/playwright-project-type-error

To reproduce run npm run e2e in /design folder

However, while testing this, I noticed an interesting thing: it depends on the directory where the playwright command is run.

Our directory structure is like this

/project
    /design
        /e2e
            - playwright tests go here
        package.json
        package-lock.json
        playwright.config.js

When running the tests from inside project/design/e2e it's fine.
When running the tests from inside project/design, as we do, it gives the error.
UPDATE: that's because when running in the e2e folder skips the entire config object (duh 💩 )

[senn]

Problem found: it's because the project name is defined like this:

const timestamp = new Date().toISOString();
....

name: `Automated Playwright tests ${timestamp}`,

Somehow it can't handle the variable being interpolated there. I tried with singular quots and a + sign, same result. Also tried to manually construct the string-date-representation by concatenating stuff:

const now = new Date();
const date = now.getDate();
const month = now.getMonth();
const year = now.getFullYear();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const timestamp = date + '-' + month + '-' + year + ' ' + hours + ':' + minutes + ':' + seconds;

and it still fails on the project error (with both backticks string templates or just using + to concatenate it.

However if I set the timestamp variable to an actual string, even the same value as the result of new Date().toISOString():

const timestamp = "2025-01-31T13:08:03.807Z";

Then it works!

It seems I cannot add a non-constant in there? I'm not a front-end engineer or JS expert so I have no clue.

A solution or workaround to insert a dynamic name in a project would be nice, even if it may not be a PW issue (or is it?)

[agg23]

I'm glad you found your problem. The config file is executed multiple times in different contexts, so a non-stable value such as the current datetime is not suitable for use in any identifiers. I have added documentation about this, and will be adding a proper error message in this particular case so it isn't a "Cannot read properties of undefined" error.

For your particular usecase, why are you trying to create dynamic project names? Project names are intended to be just that; stable names for some representative of "project" (browser, device, selection of tests, etc...). Automated Playwright tests ${timestamp} doesn't make sense to us as we want every single run on every single device (CI, local machine) to match up, and things like snapshots use those project names for computing paths.

[senn]

Thanks for the docu + error message, good improvements.

It doesn't make sense in a traditional Playwright context, I agree. We just need/want it because the zephyr-reporter uses the project.title as input for the creation of the Test Cycle in Zephyr. It's created as

this.api.createTestCycle({
          projectKey,
          testPlanKey: key,
          name: `${this.options.zephyr.testPlanTitle ?? key} - ${project.title}`,  // <--- here
        })

We wanted to have the test cycle contain the timestamp of the PW run.

[agg23]

I am unfamiliar with Zephyr, but I think you might be misusing it:

Test cycles often make up parts of a test plan, which is used to track large-scale testing iterations, like an entire release or new version of your product.

In any case, this is not functionality we will be supporting.

[senn]

Well no, we're not misusing it. Playwright tests will be used to replace a lot of manual BAU and regression testing, which happens before our bi-weekly release moments. Now the tester(s) add cycles each time, and so will Playwright. But without the timestamp then...

And not supporting is fine, I'm just glad I know why it's happening.

Closing this ticket. Thanks for the followup.