Add Playwright plugin config

Author: Tlacenka

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -49,6 +49,7 @@ body:
         - Jest
         - Vitest
         - Cypress
+        - Playwright
         - Storybook
     validations:
       required: true

.github/ISSUE_TEMPLATE/change-request.yml

@@ -47,6 +47,7 @@ body:
         - Jest
         - Vitest
         - Cypress
+        - Playwright
         - Storybook
     validations:
       required: true

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -47,6 +47,7 @@ body:
         - Jest
         - Vitest
         - Cypress
+        - Playwright
         - Storybook
     validations:
       required: true

README.md

@@ -20,6 +20,7 @@ Recommended ESLint presets by [Code PushUp](https://github.com/code-pushup/cli/t
 |       ![jest](./docs/icons/material/jest.png)       | [jest](./docs/jest.md)             | Config for projects using **Jest** for testing.                     |
 |     ![vitest](./docs/icons/material/vitest.png)     | [vitest](./docs/vitest.md)         | Config for projects using **Vitest** for testing.                   |
 |    ![cypress](./docs/icons/material/cypress.png)    | [cypress](./docs/cypress.md)       | Config for projects using **Cypress** for testing.                  |
+| ![playwright](./docs/icons/material/playwright.png) | [playwright](./docs/playwright.md) | Config for projects using **Playwright** for testing.               |
 |  ![storybook](./docs/icons/material/storybook.png)  | [storybook](./docs/storybook.md)   | Config for projects using **Storybook** for UI components.          |
 
 Some configs extend other configs, as illustrated below. So, for example, extending `angular` config implicitly extends `typescript` and `javascript` configs as well.
@@ -89,6 +90,7 @@ All peer dependencies used by `@code-pushup/eslint-config` are listed below, alo
 |       ![jest](./docs/icons/material/jest.png)       | [eslint-plugin-jest](https://www.npmjs.com/package/eslint-plugin-jest)                               | `^28.8.0`  |          |
 |        ![test](./docs/icons/icons8/test.png)        | [eslint-plugin-jest-formatting](https://www.npmjs.com/package/eslint-plugin-jest-formatting)         |  `^3.0.0`  |          |
 |     ![nodejs](./docs/icons/material/nodejs.png)     | [eslint-plugin-n](https://www.npmjs.com/package/eslint-plugin-n)                                     | `>=17.0.0` |          |
+| ![playwright](./docs/icons/material/playwright.png) | [eslint-plugin-playwright](https://www.npmjs.com/package/eslint-plugin-playwright)                   | `>=2.1.0`  |          |
 |        ![rxjs](./docs/icons/other/rxjs.png)         | [eslint-plugin-rxjs-x](https://www.npmjs.com/package/eslint-plugin-rxjs-x)                           | `>=0.6.0`  |          |
 |  ![storybook](./docs/icons/material/storybook.png)  | [eslint-plugin-storybook](https://www.npmjs.com/package/eslint-plugin-storybook)                     | `>=0.10.0` |          |
 |     ![vitest](./docs/icons/material/vitest.png)     | [eslint-plugin-vitest](https://www.npmjs.com/package/eslint-plugin-vitest)                           | `>=0.5.0`  |          |

docs/icons/material/playwright.png

@@ -50,6 +50,7 @@
     "eslint-plugin-jest": "^28.8.0",
     "eslint-plugin-jest-formatting": "^3.0.0",
     "eslint-plugin-n": ">=17.0.0",
+    "eslint-plugin-playwright": ">=2.1.0",
     "eslint-plugin-promise": ">=6.4.0",
     "eslint-plugin-rxjs-x": ">=0.6.0",
     "eslint-plugin-sonarjs": "^1.0.4",
@@ -84,6 +85,9 @@
     "eslint-plugin-n": {
       "optional": true
     },
+    "eslint-plugin-playwright": {
+      "optional": true
+    },
     "eslint-plugin-rxjs-x": {
       "optional": true
     },
@@ -111,6 +115,7 @@
     "eslint-plugin-jest": "^28.8.0",
     "eslint-plugin-jest-formatting": "^3.1.0",
     "eslint-plugin-n": "^17.0.0",
+    "eslint-plugin-playwright": "^2.1.0",
     "eslint-plugin-promise": "^6.4.0",
     "eslint-plugin-rxjs-x": "^0.6.1",
     "eslint-plugin-sonarjs": "^1.0.4",

docs/playwright.md

@@ -13,6 +13,7 @@ const configDescriptions = {
   jest: md`Config for projects using ${md.bold('Jest')} for testing.`,
   vitest: md`Config for projects using ${md.bold('Vitest')} for testing.`,
   cypress: md`Config for projects using ${md.bold('Cypress')} for testing.`,
+  playwright: md`Config for projects using ${md.bold('Playwright')} for testing.`,
   storybook: md`Config for projects using ${md.bold('Storybook')} for UI components.`,
 };
 
@@ -31,6 +32,7 @@ const configIcons = {
   jest: 'material/jest',
   vitest: 'material/vitest',
   cypress: 'material/cypress',
+  playwright: 'material/playwright',
   storybook: 'material/storybook',
 };
 
@@ -40,6 +42,7 @@ const configPatterns = {
   jest: '*.test.ts',
   vitest: '*.test.ts',
   cypress: '*.cy.ts',
+  playwright: '*.spec.ts',
   storybook: '*.stories.ts',
 };
 
@@ -50,7 +53,7 @@ const configExtraPatterns = {
 };
 
 /** @type {(keyof typeof configDescriptions)[]} */
-const testConfigs = ['jest', 'vitest', 'cypress'];
+const testConfigs = ['jest', 'vitest', 'cypress', 'playwright'];
 
 const tsConfigDocsReference = md`Refer to ${md.link('./typescript.md#🏗️-setup', "step 3 in TypeScript config's setup docs")} for how to set up tsconfig properly.`;
 

package-lock.json

@@ -16,6 +16,7 @@ const pluginIcons = {
   'jest-formatting': 'icons8/test',
   n: 'material/nodejs',
   'no-secrets': 'icons8/secure',
+  playwright: 'material/playwright',
   promise: 'icons8/promise',
   react: 'material/react',
   'react-hooks': 'material/react_ts',
@@ -47,6 +48,8 @@ const pluginDocsUrls = {
     'https://github.com/dangreenisrael/eslint-plugin-jest-formatting#readme',
   n: 'https://github.com/eslint-community/eslint-plugin-n#readme',
   'no-secrets': 'https://github.com/nickdeis/eslint-plugin-no-secrets#readme',
+  playwright:
+    'https://github.com/playwright-community/eslint-plugin-playwright#readme',
   promise: 'https://github.com/eslint-community/eslint-plugin-promise#readme',
   react: 'https://github.com/jsx-eslint/eslint-plugin-react#readme',
   'react-hooks':

package.json

@@ -46,6 +46,7 @@ export type Icon =
   | 'material/javascript'
   | 'material/jest'
   | 'material/nodejs'
+  | 'material/playwright'
   | 'material/react_ts'
   | 'material/react'
   | 'material/storybook'

scripts/helpers/configs.js

@@ -0,0 +1,40 @@
+// @ts-check
+
+import playwright from 'eslint-plugin-playwright';
+import tseslint from 'typescript-eslint';
+import { PLAYWRIGHT_FILE_PATTERNS } from '../lib/patterns.js';
+
+export default tseslint.config({
+  files: PLAYWRIGHT_FILE_PATTERNS,
+  extends: [
+    playwright.configs['flat/recommended'],
+    {
+      name: 'code-pushup/playwright/customized',
+      rules: {
+        'playwright/no-conditional-expect': 'warn',
+        'playwright/no-conditional-in-test': 'warn',
+      },
+    },
+    {
+      name: 'code-pushup/playwright/additional',
+      rules: {
+        'playwright/no-commented-out-tests': 'warn',
+        'playwright/no-duplicate-hooks': 'warn',
+        'playwright/no-focused-test': 'warn',
+        'playwright/no-nested-step': 'warn',
+        'playwright/prefer-comparison-matcher': 'warn',
+        'playwright/prefer-equality-matcher': 'warn',
+        'playwright/prefer-hooks-in-order': 'warn',
+        'playwright/prefer-hooks-on-top': 'warn',
+        'playwright/prefer-native-locators': 'warn',
+        'playwright/prefer-locator': 'warn',
+        'playwright/prefer-to-be': 'warn',
+        'playwright/prefer-to-contain': 'warn',
+        'playwright/prefer-to-have-count': 'warn',
+        'playwright/prefer-to-have-length': 'warn',
+        'playwright/require-hook': 'warn',
+        'playwright/require-to-throw-message': 'warn',
+      },
+    },
+  ],
+});

scripts/helpers/plugins.js

@@ -72,6 +72,12 @@ export const CYPRESS_FILE_PATTERNS = [
   '**/e2e/**/*.[jt]s?(x)',
 ];
 
+export const PLAYWRIGHT_FILE_PATTERNS = [
+  '**/*.+(test|spec).[jt]s?(x)',
+  '**/*.po.[jt]s?(x)',
+  '**/e2e/**/*.[jt]s?(x)',
+];
+
 export const NODE_FILE_PATTERNS = ['**/*.ts', '**/*.js'];
 
 export const GRAPHQL_FILE_PATTERNS = ['**/*.graphql'];

scripts/helpers/types.d.ts

@@ -0,0 +1,47 @@
+// @ts-check
+
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+import { createLintUtils } from '../helpers/lint-utils';
+
+describe('playwright config', () => {
+  const { setup, teardown, loadConfig } = createLintUtils(
+    'playwright',
+    '*.spec.ts',
+  );
+
+  beforeAll(setup);
+
+  afterAll(teardown);
+
+  it('should not include playwright rules for non-test file', async () => {
+    const config = await loadConfig('components/Button.tsx');
+    expect(Object.keys(config?.rules ?? {}).join(',')).not.toContain(
+      'playwright/',
+    );
+  });
+
+  it('should include playwright rules for test file', async () => {
+    const config = await loadConfig('components/login.test.ts');
+    expect(Object.keys(config.rules ?? {}).join(',')).toContain('playwright/');
+  });
+
+  it('should include playwright rules for test folder', async () => {
+    const config = await loadConfig('e2e/dashboard/subscription.ts');
+    expect(Object.keys(config.rules ?? {}).join(',')).toContain('playwright/');
+  });
+
+  it('should have rule from extended recommended playwright config', async () => {
+    const config = await loadConfig();
+    expect(config.rules).toHaveProperty('playwright/valid-expect');
+  });
+
+  it('should have explicitly added rule', async () => {
+    const config = await loadConfig();
+    expect(config.rules).toHaveProperty('playwright/prefer-native-locators');
+  });
+
+  it('should have customized severity level for rule from extended config', async () => {
+    const config = await loadConfig();
+    expect(config.rules?.['playwright/no-conditional-expect']).toEqual([1]);
+  });
+});