add eslint-plugin-playwright (#5074)

- add missing await
- add comment explaining no-force override

.eslintrc.js

@@ -152,9 +152,22 @@ module.exports = {
       plugins: ["cypress", "no-only-tests"],
       rules: {
         "no-only-tests/no-only-tests": "error",
+        // vanilla framework often hides default inputs and displays styled ones instead
+        // because of this we need to use use force option to allow interacting with hidden fields
         "cypress/no-force": "warn",
         "prettier/prettier": "error",
       },
     },
+    {
+      files: ["tests/**/*.[jt]s?(x)"],
+      extends: ["plugin:playwright/recommended"],
+      rules: {
+        // vanilla framework often hides default inputs and displays styled ones instead
+        // because of this we need to use use force option to allow interacting with hidden fields
+        "playwright/no-force-option": "off",
+        "no-only-tests/no-only-tests": "error",
+        "prettier/prettier": "error",
+      },
+    },
   ],
 };

package.json

@@ -110,6 +110,7 @@
     "eslint-config-prettier": "8.6.0",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-no-only-tests": "3.1.0",
+    "eslint-plugin-playwright": "0.15.3",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-unused-imports": "2.0.0",
     "formik-devtools-extension": "0.1.8",

tests/machines.spec.ts

@@ -36,13 +36,13 @@ test("machines list loads", async ({ page }) => {
   await expect(page.getByTestId("section-header-title")).toHaveText(
     /[0-9]+ machine[s]? in [0-9]+ pool[s]?/i
   );
-  await expect(page.getByRole("grid", { name: /Loading/i })).not.toBeVisible();
+  await expect(page.getByRole("grid", { name: /Loading/i })).toBeHidden();
   // expect a single machine.list and machine.count request
   await expect(machineListRequests.length).toBe(1);
   await expect(machineCountRequests.length).toBe(1);
   // perform machine search
   await page.getByLabel("Search").type("doesnotexist");
-  await expect(page.getByRole("grid", { name: /Loading/i })).not.toBeVisible();
+  await expect(page.getByRole("grid", { name: /Loading/i })).toBeHidden();
   await expect(
     page.getByText(/No machines match the search criteria/)
   ).toBeVisible();

yarn.lock

@@ -6268,6 +6268,11 @@ eslint-plugin-no-only-tests@3.1.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-no-only-tests/-/eslint-plugin-no-only-tests-3.1.0.tgz#f38e4935c6c6c4842bf158b64aaa20c366fe171b"
   integrity sha512-Lf4YW/bL6Un1R6A76pRZyE1dl1vr31G/ev8UzIc/geCgFWyrKil8hVjYqWVKGB/UIGmb6Slzs9T0wNezdSVegw==
 
+eslint-plugin-playwright@0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-playwright/-/eslint-plugin-playwright-0.15.3.tgz#9fd8753688351bcaf41797eb6a7df8807fd5eb1b"
+  integrity sha512-LQMW5y0DLK5Fnpya7JR1oAYL2/7Y9wDiYw6VZqlKqcRGSgjbVKNqxraphk7ra1U3Bb5EK444xMgUlQPbMg2M1g==
+
 eslint-plugin-prettier@4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"