From f421508581331d56b09394f38601185907218c3e Mon Sep 17 00:00:00 2001
From: mosta <mostafa_mohab18@hotmail.com>
Date: Fri, 6 Dec 2024 19:15:52 +0200
Subject: [PATCH] Add Updates to yml and readme

---
 .github/workflows/main.yml | 54 +++++++++++++++++++++++---------------
 README.md                  |  2 ++
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 0e88996..7d97422 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -1,4 +1,5 @@
 name: Playwright Tests
+
 'on':
   pull_request:
     branches:
@@ -13,63 +14,73 @@ name: Playwright Tests
           - firefox
           - chrome
           - microsoftedge
+
 jobs:
   Custom_Linux_Grid:
     runs-on: ubuntu-latest
-    steps:
 
+    steps:
+      # Step 1: Checkout the code
       - name: Checkout Code
         uses: actions/checkout@v4
 
+      # Step 2: Set up Node.js environment
       - name: Setup Node.js env
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
 
+      # Step 3: Install Yarn (if not installed)
+      - name: Install Yarn
+        run: |
+          npm install -g yarn
+
+      # Step 4: Install dependencies using Yarn
       - name: Install dependencies
         run: |
-          npm install
-          npm install playwright
-          npm install typescript ts-node @types/node
+          yarn install
+          yarn add playwright
+          yarn add typescript ts-node @types/node
 
+      # Step 5: Install Playwright Browsers
       - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
+        run: yarn playwright install --with-deps
 
+      # Step 6: Log Browser Version
       - name: Log Browser Version
-        run: >
+        run: |
           if [ '${{ github.event.inputs.targetBrowser }}' == 'firefox' ]; then
-              BROWSER_VERSION=$(npx playwright show-browser firefox --version)
+              BROWSER_VERSION=$(yarn playwright show-browser firefox --version)
               echo "Firefox Browser Version: $BROWSER_VERSION"
           elif [ '${{ github.event.inputs.targetBrowser }}' == 'chrome' ]; then
-              BROWSER_VERSION=$(npx playwright show-browser chromium --version)
+              BROWSER_VERSION=$(yarn playwright show-browser chromium --version)
               echo "Google Chrome Browser Version: $BROWSER_VERSION"
-          elif [ '${{ github.event.inputs.targetBrowser }}' == 'microsoftedge'
-          ]; then
-              BROWSER_VERSION=$(npx playwright show-browser webkit --version)
+          elif [ '${{ github.event.inputs.targetBrowser }}' == 'microsoftedge' ]; then
+              BROWSER_VERSION=$(yarn playwright show-browser webkit --version)
               echo "Microsoft Edge Browser Version: $BROWSER_VERSION"
           else
               echo "Browser not supported"
           fi
 
+      # Step 7: Compile TypeScript
       - name: Compile TypeScript
-        run: npx tsc
+        run: yarn tsc
 
+      # Step 8: Run Playwright Tests with xvfb-run
       - name: Run Playwright Tests with xvfb-run
-        run: >
+        run: |
           # Check if Xvfb is needed (for headed mode)
-
-          if [ '${{ github.event.inputs.targetBrowser }}' == 'firefox'       ]
-          ||
-             [ '${{ github.event.inputs.targetBrowser }}' == 'chrome'        ] ||
+          if [ '${{ github.event.inputs.targetBrowser }}' == 'firefox' ] ||
+             [ '${{ github.event.inputs.targetBrowser }}' == 'chrome' ] ||
              [ '${{ github.event.inputs.targetBrowser }}' == 'microsoftedge' ]; then
             echo "Running tests with xvfb-run to simulate display"
-            xvfb-run -a npx playwright test --project="${{ github.event.inputs.targetBrowser || 'chromium' }}"
+            xvfb-run -a yarn playwright test --project="${{ github.event.inputs.targetBrowser || 'chromium' }}"
           else
             echo "Running tests headlessly"
-            npx playwright test --project="${{ github.event.inputs.targetBrowser || 'chromium' }}"
+            yarn playwright test --project="${{ github.event.inputs.targetBrowser || 'chromium' }}"
           fi
 
-
+      # Step 9: Upload Playwright Report as Pipeline Artifact
       - name: Upload Playwright Report as Pipeline Artifact
         if: always()
         uses: actions/upload-artifact@v4
@@ -77,9 +88,10 @@ jobs:
           name: Playwright_Report
           path: playwright-report/
 
+      # Step 10: Upload Playwright Report HTML as Pipeline Artifact
       - name: Upload Playwright Report HTML as Pipeline Artifact
         if: always()
         uses: actions/upload-artifact@v4
         with:
           name: Playwright_Report_HTML
-          path: playwright-report/index.html
+          path: playwright-report/index.html
\ No newline at end of file
diff --git a/README.md b/README.md
index 12a9be9..837c15c 100644
--- a/README.md
+++ b/README.md
@@ -27,3 +27,5 @@ Tools and Technologies:
 9- Github Actions
 
 10- xvfb-run
+
+11- Yarn