test(playwright): Convert Cypress tests to Playwright - 2

.github/actions/restore-cache/action.yml

@@ -11,7 +11,6 @@ runs:
           node_modules
           */*/node_modules
           ~/.cache/Cypress
-          ~/.cache/ms-playwright
         key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-dependencies
     - name: Cache artifacts
       id: cache-artifacts
@@ -21,3 +20,10 @@ runs:
           packages/*/dist
           packages/core/build
         key: ${{ runner.os }}-${{ github.run_id }}-artifacts
+    - name: Cache playwright binaries
+      id: cache-playwright-binaries
+      uses: actions/cache@v3
+      with:
+        path: |
+          ~/.cache/ms-playwright
+        key: ${{ runner.os }}-${{ hashFiles('playwright/package.json') }}-playwright-binaries

.github/workflows/ci.yml

@@ -151,7 +151,11 @@ jobs:
 
   e2e:
     needs: prepare
-    runs-on: [ubuntu-latest]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1/6, 2/6, 3/6, 4/6, 5/6, 6/6]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -165,20 +169,54 @@ jobs:
       - name: Set up Playwright browsers
         run: yarn test:e2e:install
 
+      - name: Set up Slice Machine project
+        run: |
+          yarn workspaces foreach --include '{@slicemachine/adapter-next,@slicemachine/manager,@slicemachine/plugin-kit,start-slicemachine}' --parallel --topological-dev run build
+          yarn workspace slice-machine-ui pack --out ../../e2e-projects/next/sm.tgz
+          yarn workspace cimsirp add -D ./sm.tgz
+
       - name: Running E2E tests
-        run: yarn test:e2e
+        run: yarn test:e2e --shard ${{ matrix.shard }}
         env:
-          PRISMIC_URL: https://wroom.io
-          WROOM_EMAIL: ${{ secrets.EMAIL }}
-          WROOM_PASSWORD: ${{ secrets.PASSWORD }}
+          DEBUG: pw:test
+
+      - name: Upload blob report to GitHub Actions Artifacts
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: e2e-all-blob-reports
+          path: playwright/blob-report
+          retention-days: 1
+
+  e2e-merge-reports:
+    needs: e2e
+    runs-on: ubuntu-latest
+    if: always()
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Restore cache
+        uses: ./.github/actions/restore-cache
+
+      - name: Set up Node
+        uses: ./.github/actions/setup-node
+
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: e2e-all-blob-reports
+          path: playwright/e2e-all-blob-reports
+
+      - name: Merge into HTML Report
+        run: yarn test:e2e:merge-reports --reporter html ./e2e-all-blob-reports
 
       - name: Upload HTML report
         uses: actions/upload-artifact@v3
-        if: failure()
         with:
-          name: Playwright HTML report
-          path: playwright/playwright-report/
-          retention-days: 30
+          name: html-report--attempt-${{ github.run_attempt }}
+          path: playwright/playwright-report
+          retention-days: 14
 
   e2e-cypress:
     needs: prepare

cypress/e2e/slices/00-create.cy.js

@@ -10,7 +10,7 @@ const editedSliceName = "EditedSliceName";
 const sliceId = "test_slice"; // generated automatically from the slice name
 const lib = ".--slices";
 
-describe("Create Slices", () => {
+describe.skip("Create Slices", () => {
   beforeEach(() => {
     cy.setSliceMachineUserContext({});
     cy.clearProject();

cypress/e2e/updates/simulator-tooltip.cy.js

@@ -20,7 +20,7 @@ describe("simulator tooltip", () => {
 
     cy.contains("Simulate your slices").should("exist");
 
-    cy.contains("Got It").click();
+    cy.contains("Got it").click();
 
     cy.contains("Simulate your slices").should("not.exist");
 

cypress/e2e/user-flows/scenario_slice_association.cy.js

@@ -78,50 +78,4 @@ describe.skip("I am an existing SM user (Next) and I want to associate a Slice t
     cy.contains("Repeatable Rich Text Field");
     cy.contains("Repeatable Key Text Field");
   });
-
-  it("Push the newly created custom type and slice", () => {
-    changesPage.goTo().pushChanges().isUpToDate();
-  });
-
-  it.skip("Add the Slice to the Custom Type", () => {
-    cy.visit(`/custom-types/${customTypeId}`);
-
-    cy.get("[data-cy=update-slices]").click();
-    cy.get(`[data-cy=shared-slice-card-${sliceId}]`).click();
-    cy.get("[data-cy=update-slices-modal]").submit();
-
-    customTypeBuilder.save();
-
-    cy.reload();
-    cy.contains(sliceName);
-  });
-
-  it.skip("Push the custom type with the Slice associated", () => {
-    changesPage.goTo().pushChanges().isUpToDate();
-  });
-
-  it.skip("Displays and fill the satisfaction survey and the survey never reappears after", () => {
-    const lastSyncChange = Date.now() - 1000 * 60 * 60 * 2;
-
-    // Setting the context to display the survey
-    cy.setSliceMachineUserContext({
-      hasSendAReview: false,
-      lastSyncChange,
-    });
-
-    // Visit a page
-    cy.visit("/");
-
-    cy.get("#review-form");
-    cy.get("[data-cy=review-form-score-3]").click();
-    cy.get("[data-cy=review-form-comment]").type(
-      "Cypress test - testing the comment of the survey",
-    );
-    cy.get("#review-form").submit();
-
-    cy.reload();
-    cy.waitUntil(() => cy.get("[data-cy=create-ct]"));
-
-    cy.get("#review-form").should("not.exist");
-  });
 });