Migrate navigation tests to playwright (#4294)

* migrated create products tests to Playwright

* permission tests with playwright wip

* migrated navigation tests to playwright

* switch to camel case in pw project - remove faker random number generator

* login function in setup unification, wait for success banner extended to 15s

.changeset/perfect-ligers-hope.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+migrated navigation tests to playwright

package.json

@@ -124,7 +124,7 @@
     "@graphql-codegen/typescript-apollo-client-helpers": "^2.1.10",
     "@graphql-codegen/typescript-operations": "^2.2.4",
     "@graphql-codegen/typescript-react-apollo": "^3.2.5",
-    "@playwright/test": "^1.37.1",
+    "@playwright/test": "^1.38.1",
     "@saleor/app-sdk": "0.43.0",
     "@sentry/cli": "^2.20.6",
     "@swc/jest": "^0.2.26",
@@ -136,6 +136,7 @@
     "@types/is-ci": "^3.0.0",
     "@types/jscodeshift": "^0.11.3",
     "@types/lodash-es": "^4.17.3",
+    "@types/node": "^20.8.0",
     "@types/react": "^17.0.50",
     "@types/react-dom": "^17.0.17",
     "@types/react-dropzone": "^4.2.2",

playwright/data/userPermissions.ts

@@ -0,0 +1,16 @@
+export const USER_PERMISSION = {
+  channel: "channel.manager@example.com",
+  shipping: "shipping.manager@example.com",
+  giftCard: "gift.card.manager@example.com",
+  app: "app.manager@example.com",
+  settings: "setting.manager@example.com",
+  page: "page.manager@example.com",
+  order: "order.manager@example.com",
+  translations: "translation.manager@example.com",
+  staff: "staff.manager@example.com",
+  customer: "user.manager@example.com",
+  productTypeAndAttribute: "product.type.and.attribute.manager@example.com",
+  discount: "discount.manager@example.com",
+  plugin: "plugin.manager@example.com",
+  product: "product.manager@example.com",
+};

playwright/pages/appsPage.ts

@@ -0,0 +1,13 @@
+import type { Locator, Page } from "@playwright/test";
+
+export class AppsPage {
+  readonly page: Page;
+  readonly installExternalAppButton: Locator;
+  readonly appsLogosList: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.installExternalAppButton = page.getByTestId("add-app-from-manifest");
+    this.appsLogosList = page.getByTestId("app-logo");
+  }
+}

playwright/pages/base-page.ts → playwright/pages/basePage.ts

@@ -3,17 +3,24 @@ import type { Locator, Page } from "@playwright/test";
 import { expect } from "@playwright/test";
 
 export class BasePage {
-  public page: Page;
-  public pageHeader: Locator;
+  readonly page: Page;
+  readonly pageHeader: Locator;
+  readonly gridCanvas: Locator;
 
   constructor(page: Page) {
     this.page = page;
     this.pageHeader = page.getByTestId("page-header");
+    this.gridCanvas = page.locator('[data-testid="data-grid-canvas"]');
   }
   async gotoCreateProductPage(productTypeId: string) {
     await this.page.goto(
       `${URL_LIST.products}${URL_LIST.productsAdd}${productTypeId}`,
     );
     await expect(this.pageHeader).toBeVisible({ timeout: 10000 });
   }
+  async expectGridToBeAttached() {
+    await expect(this.gridCanvas).toBeAttached({
+      timeout: 10000,
+    });
+  }
 }

playwright/pages/categoriesPage.ts

@@ -0,0 +1,11 @@
+import type { Locator, Page } from "@playwright/test";
+
+export class CategoriesPage {
+  readonly page: Page;
+  readonly createCategoryButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.createCategoryButton = page.getByTestId("create-category");
+  }
+}