Jsdoc for fixture type
Hi all,
our project is using javascript to develop test script. To satisfy the safe-typing we are applying the JSDOC for the script (page-object, test case, ...). However, we are getting stuck at how to define the type for the fixture correctly. Have you ever experienced and tried to apply jsdoc before, feel free to share
import { test as base, expect } from '@playwright/test';
import MyAccountPage from '@page_object/my_account/MyAccountPage';
/**
* @typedef ListFixtureOptions
* @property {MyAccountPage} myAccountPage // page-object
*/
/**
* @typedef {import('@playwright/test').Fixtures<{[M in keyof ListFixtureOptions]: ListFixtureOptions[M]} & import('@playwright/test').PlaywrightTestOptions>} CustomFixtures
*/
/**
* @type {import('@playwright/test').TestType<CustomFixtures, {}>}
*/
export const testPW = base.extend({
myAccountPage: async ({ page }, use) => {
await use(new MyAccountPage(page));
},
});Error we are getting
Type '({ page }: {} & {} & {} & { myAccountPage?: TestFixtureValue<MyAccountPage, { myAccountPage: MyAccountPage; } & PlaywrightTestOptions> | [...]; ... 24 more ...; testIdAttribute?: TestFixtureValue<...> | [...]; } & PlaywrightTestArgs & PlaywrightTestOptions & PlaywrightWorkerArgs & PlaywrightWorkerOptions, use: (r: u...' is not assignable to type 'TestFixtureValue<TestFixtureValue<MyAccountPage, { myAccountPage: MyAccountPage; } & PlaywrightTestOptions> | [...], {} & ... 6 more ... & PlaywrightWorkerOptions> | [...]'.
.This thread is trying to answer question "How to correctly define the 'type' for a fixture using JSDoc in a JavaScript test script?"
Related Ask AI answer for "What is the process for defining the 'type' for a fixture using JSDoc in a JavaScript test script with Playwright Test?".
Answer
Defining Fixture Types with JSDoc in Playwright Test
When you're setting up your test environment in Playwright Test, you'll often use fixtures. These handy tools help you establish the necessary resources for each test. To define the type of a fixture, you'll use JSDoc annotations.
Let's say you have a fixture named page that provides a Page object. Here's how you'd define its type:
/**
* @type {import('playwright').Page}
*/
const page = await browser.newPage();With the @type annotation, you're telling TypeScript that page is of type import('playwright').Page. This helps with code analysis and tooling support, catching potential errors and offering auto-completion suggestions.
Remember to use meaningful names for your fixtures. They should start with a letter or underscore and can contain only letters, numbers, or underscores. If a fixture is slow and needs more time than the default timeout allows, set a separate timeout for it.
You can also extend existing fixtures and customize their behavior. For example, to automatically navigate to a specific URL, you'd do this:
/**
* @typedef { import('@playwright/test').PlaywrightWorkerFixtures & { page: import('playwright').Page } } Fixtures
*/
/**
* @type {import('@playwright/test').Test<Fixtures>}
*/
const test = base.extend({
page: async ({ baseURL, page }, use) => {
await page.goto('https://ray.run');
await use(page);
},
});In this example, we're extending the page fixture to navigate to 'https://ray.run'. The @typedef annotation defines a custom type named Fixtures, which includes the original Playwright Test fixtures and our custom page fixture. We then use this custom type in the test definition.
By using JSDoc annotations, you can define fixture types in your JavaScript test script, improving code analysis and tooling support.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.