Use retry and update eshop playwright tests to wait for the catalog to appear

.github/workflows/test.yaml

@@ -270,20 +270,25 @@ jobs:
       - name: Run Playwright Test
         if: steps.gen-id.outputs.RUN_TEST == 'true' && matrix.uiTestFile != ''
         id: run-playwright-test
-        run: |
-          if [[ "${{ matrix.container }}" != "" ]]; then
-            rad resource expose containers ${{ matrix.container }} ${{ matrix.exposeArgs }} --port ${{ matrix.port }} &
-            echo "Endpoint: http://localhost:${{ matrix.port }}"
-            export ENDPOINT="http://localhost:${{ matrix.port }}"
-          else
-            endpoint="$(rad app status -a ${{ matrix.app }} | sed 's/ /\n/g' | grep http)"
-            echo "Endpoint: $endpoint"
-            export ENDPOINT=$endpoint
-          fi
-          cd playwright/
-          npm ci
-          npx playwright install --with-deps
-          npx playwright test ${{ matrix.uiTestFile }} --retries 3
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 5
+          max_attempts: 3
+          retry_wait_seconds: 30
+          command: |
+            if [[ "${{ matrix.container }}" != "" ]]; then
+              rad resource expose containers ${{ matrix.container }} ${{ matrix.exposeArgs }} --port ${{ matrix.port }} &
+              echo "Endpoint: http://localhost:${{ matrix.port }}"
+              export ENDPOINT="http://localhost:${{ matrix.port }}"
+            else
+              endpoint="$(rad app status -a ${{ matrix.app }} | sed 's/ /\n/g' | grep http)"
+              echo "Endpoint: $endpoint"
+              export ENDPOINT=$endpoint
+            fi
+            cd playwright/
+            npm ci
+            npx playwright install --with-deps
+            npx playwright test ${{ matrix.uiTestFile }} --retries 3
       - name: Upload Playwright Results
         uses: actions/upload-artifact@v3
         if: always() && ( steps.run-playwright-test.outcome == 'success' || steps.run-playwright-test.outcome == 'failure' )

playwright/tests/eshop/eshop.app.spec.ts

@@ -61,17 +61,33 @@ test("eShop on Containers App Basic UI and Functionality Checks", async ({
   await expect(page.getByText("My orders")).toBeVisible();
   await expect(page.getByText("Log Out")).toBeVisible();
 
+  // Find the catalog
+  console.log("Finding the catalog");
+  const catalogSelector = "esh-catalog";
+  await page.waitForSelector(catalogSelector);
+  const catalog = page.locator(catalogSelector);
+  await expect(catalog).toBeVisible();
+  console.log("Catalog found");
+
   let numberOfItemsAdded = 0;
   // Add an item to the cart
-  const firstItem = page.locator("div:nth-child(1) > .esh-catalog-item");
+  console.log("Adding the first item to the cart");
+  const firstItemSelector = "div:nth-child(1) > .esh-catalog-item";
+  await page.waitForSelector(firstItemSelector);
+  const firstItem = page.locator(firstItemSelector);
   await expect(firstItem).toBeVisible();
   await firstItem.click();
+  console.log("Item added to the cart");
   numberOfItemsAdded++;
 
   // Add an item to the cart
-  const secondItem = page.locator("div:nth-child(2) > .esh-catalog-item");
+  console.log("Adding the second item to the cart");
+  const secondItemSelector = "div:nth-child(2) > .esh-catalog-item";
+  await page.waitForSelector(secondItemSelector);
+  const secondItem = page.locator(secondItemSelector);
   await expect(secondItem).toBeVisible();
   await secondItem.click();
+  console.log("Item added to the cart");
   numberOfItemsAdded++;
 
   // Go to the cart