How do you add a custom property to the Playwright config file

Question

I'm trying to add a custom property to a Playwright config file. I know you can just jam a key/value pair into the non-project use section and have it accessible, but I'm trying to get it to work with TypeScript types. I followed the example for Parameterized Projects from the Playwright site, but it seems that only works for projects.

What I really want is to be able to add a custom property to the non-project use section of the config and be able to override it from a project. Is this possible? The example above gets close, but it makes doing local development hard. I just want to set the values in the non-project use section and then run a test, without have to muck around with the projects. (But still have the ability to override the non-project values with project specific values.)

My goal is to be able to set projectName and dataSourceName variables that can be specified in the non-project use section of the config file yet overridden in a project.

Update: This was a self-inflicted issue! I overlooked setting the properties as options. After doing that everything worked as expected.

export const test = base.extend<TestOptions>({
    // Define an option and provide a default value.
    // We can later override it in the config.
    // In order to be able to override, you need to define the
    // string like this:
    projectName: ['empty-project-name', { option: true }],
    dataSourceName: ['empty-dataset-name', { option: true }]
});

Now If I can only figure out how to do this with a complex object.

Answer 1

If you're looking to use a complex object for your configuration, you can do the following:

export class DataInfo {
    projectName: string;
    dataSourceName: string;
}

export class TestOptions {
    dataInfo: DataInfo;
};

export const test = base.extend<TestOptions>({
    // Define an option and provide a default value.
    // We can later override it in the config.
    dataInfo: [{
        projectName: 'empty-project-name',
        dataSourceName: 'empty-dataset-name'
    },  { option: true }]
});

The caveat with this approach, is that the entire object, dataInfo will be overridden. You can't just override one of its properties.

(I received this answer directly from the Playwright team via GitHub.)