Improve accessibility of playwright fixture documentation (#34087)

* Improve accessibility of playwright fixture documentation

Empirically. by pulling the type definitions for the playwright fixtures out to
a type alias, we get better documentation for those fixtures.

* Exclude playwright-common from coverage checks

Author: richvdh

packages/playwright-common/src/fixtures/axe.ts

@@ -9,14 +9,16 @@ Please see LICENSE files in the repository root for full details.
 import { test as base } from "@playwright/test";
 import { AxeBuilder } from "@axe-core/playwright";
 
-// This fixture is useful for simple component library tests that won't want any extra services like a homeserver, so we
-// explicitly avoid pulling anything more than playwright's base fixtures in.
-export const test = base.extend<{
+export type TestFixtures = {
     /**
      * AxeBuilder instance for the current page
      */
     axe: AxeBuilder;
-}>({
+};
+
+// This fixture is useful for simple component library tests that won't want any extra services like a homeserver, so we
+// explicitly avoid pulling anything more than playwright's base fixtures in.
+export const test = base.extend<TestFixtures>({
     axe: async ({ page }, use) => {
         const builder = new AxeBuilder({ page });
         await use(builder);

packages/playwright-common/src/fixtures/panel.ts

@@ -14,7 +14,7 @@ import { test as base } from "./services.js";
  */
 const LEFT_PANEL_WIDTH = "368.6875px";
 
-export const test = base.extend<{
+export type TestFixtures = {
     /**
      * Whether the left panel should have its width fixed.
      * This is done because the library that we use for rendering collapsible
@@ -25,7 +25,9 @@ export const test = base.extend<{
      * behaviour.
      */
     lockLeftPanelWidth: boolean;
-}>({
+};
+
+export const test = base.extend<TestFixtures>({
     lockLeftPanelWidth: true,
     page: async ({ lockLeftPanelWidth, page }, use) => {
         const listener = async (page: Page) => {

packages/playwright-common/src/fixtures/user.ts

@@ -41,7 +41,7 @@ export async function populateLocalStorageWithCredentials(page: Page, credential
     );
 }
 
-export const test = base.extend<{
+export interface TestFixtures {
     /**
      * The displayname to use for the user registered in {@link #credentials}.
      *
@@ -71,7 +71,9 @@ export const test = base.extend<{
      * app.
      */
     user: Credentials;
-}>({
+}
+
+export const test = base.extend<TestFixtures>({
     displayName: undefined,
 
     // We don't directly depend upon the `context` fixture, but we do need to make sure that it has been run

packages/playwright-common/src/index.ts

@@ -68,16 +68,6 @@ export interface TestFixtures {
 
     labsFlags: string[];
     disablePresence: boolean;
-    /**
-     * Whether the left panel should have its width fixed.
-     * This is done because the library that we use for rendering collapsible
-     * panels uses math to calculate the width which can sometimes leads to +/-1px
-     * difference. While this does not matter to the user, it can lead to screenshot
-     * tests failing.
-     * Defaults to true, should be set to false via {@link base.use} when you want to test the collapse
-     * behaviour.
-     */
-    lockLeftPanelWidth: boolean;
 }
 
 export const test = base.extend<TestFixtures>({

vitest.config.ts

@@ -60,6 +60,8 @@ export default defineConfig({
                 "**/src/test/**",
                 // Exclude type definition files
                 "**/*.d.ts",
+                // Exclude playwright-common as it is just test utilities
+                "packages/playwright-common/**",
             ],
             reporter: [["lcov"]],
         },