From 74d7cb193a326be8c167ba2b3f0c54291a04005a Mon Sep 17 00:00:00 2001 From: MariuszBlajet Date: Sun, 12 May 2024 19:44:49 +0200 Subject: [PATCH 01/11] wip: adjust test to mobile view --- .github/workflows/ci.yml | 6 +++--- package.json | 3 ++- playwright.config.ts | 6 +++++- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5769104..3aff929 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -10,7 +10,7 @@ on: workflow_dispatch: jobs: - playwright-test-examples: + playwright-desktop-test-examples: runs-on: ubuntu-latest strategy: fail-fast: false @@ -24,7 +24,7 @@ jobs: - name: Install dependencies run: npm ci - name: Run Playwright Test Examples - run: npx playwright test + run: npx playwright test --project=desktop - name: Upload blob report to the Artifacts if: always() uses: actions/upload-artifact@v4 @@ -35,7 +35,7 @@ jobs: merge-reports-and-upload: if: always() - needs: [playwright-test-examples] + needs: [playwright-desktop-test-examples] runs-on: ubuntu-latest outputs: timestamp: ${{ steps.timestampid.outputs.timestamp }} diff --git a/package.json b/package.json index f20f700..925ae79 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "description": "", "main": "index.js", "scripts": { - "test-all": "npx playwright test --reporter=list" + "test-all-desktop": "npx playwright test --reporter=list --project=desktop", + "test-all-mobile": "npx playwright test --reporter=list --project=mobile" }, "keywords": [], "author": "", diff --git a/playwright.config.ts b/playwright.config.ts index b851238..ad8fa6f 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -17,8 +17,12 @@ export default defineConfig({ }, projects: [ { - name: 'chromium', + name: 'desktop', use: { ...devices['Desktop Chrome'] }, }, + { + name: 'mobile', + use: { ...devices['iPhone SE'] }, + }, ], }); From 7939e4f8c8b71a7217cdacd0ca114069545cc3f8 Mon Sep 17 00:00:00 2001 From: MariuszBlajet Date: Wed, 15 May 2024 18:39:05 +0200 Subject: [PATCH 02/11] chore: adjust test for mobile run --- .github/workflows/ci.yml | 25 ++++++++++++++++++++++++- pages/form.page.ts | 2 +- playwright.config.ts | 1 + tests/02-simple-form.test.ts | 2 +- 4 files changed, 27 insertions(+), 3 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 3aff929..43d96f6 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -33,9 +33,32 @@ jobs: path: blob-report retention-days: 5 + playwright-mobile-test-examples: + runs-on: ubuntu-latest + strategy: + fail-fast: false + container: + image: mcr.microsoft.com/playwright:v1.42.1-jammy + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: 18 + - name: Install dependencies + run: npm ci + - name: Run Playwright Test Examples + run: npx playwright test --project=mobile + - name: Upload blob report to the Artifacts + if: always() + uses: actions/upload-artifact@v4 + with: + name: playwright-test-examples + path: blob-report + retention-days: 5 + merge-reports-and-upload: if: always() - needs: [playwright-desktop-test-examples] + needs: [playwright-desktop-test-examples, playwright-mobile-test-examples] runs-on: ubuntu-latest outputs: timestamp: ${{ steps.timestampid.outputs.timestamp }} diff --git a/pages/form.page.ts b/pages/form.page.ts index 787db03..686563c 100644 --- a/pages/form.page.ts +++ b/pages/form.page.ts @@ -11,7 +11,7 @@ export class FormPage extends BasePage { formHeader = this.page.getByText('Basic Form Controls'); yearsOfExperienceInput = this.page.locator('#exp'); - selectedYearsOfExperience = this.page.locator('#exp_help'); + selectedYearsOfExperience = this.page.locator('span#exp_help'); pythonCheckbox = this.page.locator('#check_python+label'); javaScriptCheckbox = this.page.locator('#check_javascript'); selectedCheckboxValidationText = this.page.locator('#check_validate'); diff --git a/playwright.config.ts b/playwright.config.ts index ad8fa6f..202575e 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -22,6 +22,7 @@ export default defineConfig({ }, { name: 'mobile', + grepInvert: /@fix-on-mobile/, use: { ...devices['iPhone SE'] }, }, ], diff --git a/tests/02-simple-form.test.ts b/tests/02-simple-form.test.ts index 8516bf6..f13bd85 100644 --- a/tests/02-simple-form.test.ts +++ b/tests/02-simple-form.test.ts @@ -3,7 +3,7 @@ import { addressFormData, formInputsData } from '@root/test-data/test-data'; test.describe('Basic Form tests', () => { - test(`should be able to send form with all data`, async ({ formPage }) => { + test(`should be able to send form with all data`, { tag: '@fix-on-mobile' }, async ({ formPage }) => { await formPage.selectLanguageCheckbox(formInputsData.checkboxLang); await expect(formPage.selectedCheckboxValidationText).toHaveText(formInputsData.validationCheckboxLang); await formPage.selectFramework(formInputsData.frameworkName); From 78c9993d6ebce50f29a270bdd498092a0c419422 Mon Sep 17 00:00:00 2001 From: MariuszBlajet Date: Wed, 15 May 2024 18:46:08 +0200 Subject: [PATCH 03/11] fix: create artifacts with distinct names --- .github/workflows/ci.yml | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 43d96f6..38e251e 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -29,7 +29,7 @@ jobs: if: always() uses: actions/upload-artifact@v4 with: - name: playwright-test-examples + name: playwright-test-examples-desktop-${{ github.run_id }} path: blob-report retention-days: 5 @@ -52,7 +52,7 @@ jobs: if: always() uses: actions/upload-artifact@v4 with: - name: playwright-test-examples + name: playwright-test-examples-mobile-${{ github.run_id }} path: blob-report retention-days: 5 @@ -65,7 +65,7 @@ jobs: steps: - name: Set a timestamp id: timestampid - run: echo "timestamp=$(date --utc +%Y%m%d_%H%M%SZ)" >> "$GITHUB_OUTPUT" + run: echo "timestamp=$(date --utc +%Y%m%d_%H%M%SZ)" >> "$GITHUB_OUTPUT" - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: @@ -76,7 +76,12 @@ jobs: - name: Download blob reports from GitHub Actions Artifacts uses: actions/download-artifact@v4 with: - name: playwright-test-examples + name: playwright-test-examples-desktop-${{ github.run_id }} + path: downloaded-merged-reports-as-blob + - name: Download blob reports from GitHub Actions Artifacts + uses: actions/download-artifact@v4 + with: + name: playwright-test-examples-mobile-${{ github.run_id }} path: downloaded-merged-reports-as-blob - name: Merge the blobs into one single HTML Report @@ -98,4 +103,5 @@ jobs: destination_dir: ${{ steps.timestampid.outputs.timestamp }} - name: Write URL in summary - run: echo "### Test results (link available after 20 secs) - https://${{ github.repository_owner }}.github.io/PlaywrightTestExamples/${{ steps.timestampid.outputs.timestamp }}/index.html" >> $GITHUB_STEP_SUMMARY \ No newline at end of file + run: echo "### Test results (link available after 20 secs) - https://${{ github.repository_owner }}.github.io/PlaywrightTestExamples/${{ steps.timestampid.outputs.timestamp }}/index.html" >> $GITHUB_STEP_SUMMARY + \ No newline at end of file From 5b7b88a1c43e73aa7fb42168f3850390c2827047 Mon Sep 17 00:00:00 2001 From: MariuszBlajet Date: Wed, 15 May 2024 18:56:59 +0200 Subject: [PATCH 04/11] fix: merge reports --- .github/workflows/ci.yml | 77 ++++++++++++++++++++-------------------- 1 file changed, 38 insertions(+), 39 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 38e251e..7e5902c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -9,7 +9,7 @@ on: - main workflow_dispatch: -jobs: +jobs: playwright-desktop-test-examples: runs-on: ubuntu-latest strategy: @@ -17,21 +17,21 @@ jobs: container: image: mcr.microsoft.com/playwright:v1.42.1-jammy steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version: 18 - - name: Install dependencies - run: npm ci - - name: Run Playwright Test Examples - run: npx playwright test --project=desktop - - name: Upload blob report to the Artifacts - if: always() - uses: actions/upload-artifact@v4 - with: - name: playwright-test-examples-desktop-${{ github.run_id }} - path: blob-report - retention-days: 5 + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: 18 + - name: Install dependencies + run: npm ci + - name: Run Playwright Test Examples + run: npx playwright test --project=desktop + - name: Upload blob report to the Artifacts + if: always() + uses: actions/upload-artifact@v4 + with: + name: playwright-test-examples-desktop-${{ github.run_id }} + path: blob-report + retention-days: 5 playwright-mobile-test-examples: runs-on: ubuntu-latest @@ -40,21 +40,21 @@ jobs: container: image: mcr.microsoft.com/playwright:v1.42.1-jammy steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version: 18 - - name: Install dependencies - run: npm ci - - name: Run Playwright Test Examples - run: npx playwright test --project=mobile - - name: Upload blob report to the Artifacts - if: always() - uses: actions/upload-artifact@v4 - with: - name: playwright-test-examples-mobile-${{ github.run_id }} - path: blob-report - retention-days: 5 + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: 18 + - name: Install dependencies + run: npm ci + - name: Run Playwright Test Examples + run: npx playwright test --project=mobile + - name: Upload blob report to the Artifacts + if: always() + uses: actions/upload-artifact@v4 + with: + name: playwright-test-examples-mobile-${{ github.run_id }} + path: blob-report + retention-days: 5 merge-reports-and-upload: if: always() @@ -73,21 +73,21 @@ jobs: - name: Install dependencies run: npm ci - - name: Download blob reports from GitHub Actions Artifacts + - name: Download desktop blob report from GitHub Actions Artifacts uses: actions/download-artifact@v4 with: name: playwright-test-examples-desktop-${{ github.run_id }} - path: downloaded-merged-reports-as-blob - - name: Download blob reports from GitHub Actions Artifacts + path: downloaded-reports/desktop + - name: Download mobile blob report from GitHub Actions Artifacts uses: actions/download-artifact@v4 with: name: playwright-test-examples-mobile-${{ github.run_id }} - path: downloaded-merged-reports-as-blob + path: downloaded-reports/mobile - name: Merge the blobs into one single HTML Report - run: npx playwright merge-reports --reporter html ./downloaded-merged-reports-as-blob + run: npx playwright merge-reports --reporter html downloaded-reports/desktop blob-report downloaded-reports/mobile blob-report - - name: Upload full html report to artifacts for history + - name: Upload full HTML report to artifacts for history if: always() uses: actions/upload-artifact@v4 with: @@ -95,7 +95,7 @@ jobs: path: playwright-report retention-days: 5 - - name: Push the new files to github pages + - name: Push the new files to GitHub Pages uses: peaceiris/actions-gh-pages@v4 with: github_token: ${{ secrets.GITHUB_TOKEN }} @@ -104,4 +104,3 @@ jobs: - name: Write URL in summary run: echo "### Test results (link available after 20 secs) - https://${{ github.repository_owner }}.github.io/PlaywrightTestExamples/${{ steps.timestampid.outputs.timestamp }}/index.html" >> $GITHUB_STEP_SUMMARY - \ No newline at end of file From cafb5b510b845a9d74d8c01827b3c9a52443fca3 Mon Sep 17 00:00:00 2001 From: MariuszBlajet Date: Wed, 15 May 2024 19:07:47 +0200 Subject: [PATCH 05/11] fix: set merge-muliple: true --- .github/workflows/ci.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7e5902c..0205f91 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -78,14 +78,16 @@ jobs: with: name: playwright-test-examples-desktop-${{ github.run_id }} path: downloaded-reports/desktop + merge-multiple: true - name: Download mobile blob report from GitHub Actions Artifacts uses: actions/download-artifact@v4 with: name: playwright-test-examples-mobile-${{ github.run_id }} path: downloaded-reports/mobile + merge-multiple: true - name: Merge the blobs into one single HTML Report - run: npx playwright merge-reports --reporter html downloaded-reports/desktop blob-report downloaded-reports/mobile blob-report + run: npx playwright merge-reports --reporter html downloaded-reports/desktop/blob-report downloaded-reports/mobile/blob-report - name: Upload full HTML report to artifacts for history if: always() From 83e46f05b59417a3cb780350554e77de247cde81 Mon Sep 17 00:00:00 2001 From: MariuszBlajet Date: Wed, 15 May 2024 19:13:59 +0200 Subject: [PATCH 06/11] fix: fix artifacts path --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 0205f91..eae9b81 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -87,7 +87,7 @@ jobs: merge-multiple: true - name: Merge the blobs into one single HTML Report - run: npx playwright merge-reports --reporter html downloaded-reports/desktop/blob-report downloaded-reports/mobile/blob-report + run: npx playwright merge-reports --reporter html downloaded-reports/desktop downloaded-reports/mobile - name: Upload full HTML report to artifacts for history if: always() From 2272063fde0ecb049d6333a5c3b427d09c1c8cdb Mon Sep 17 00:00:00 2001 From: MariuszBlajet Date: Wed, 15 May 2024 19:23:13 +0200 Subject: [PATCH 07/11] fix: unzip then merge --- .github/workflows/ci.yml | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index eae9b81..28f7ebe 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -86,8 +86,13 @@ jobs: path: downloaded-reports/mobile merge-multiple: true + - name: Extract desktop report + run: unzip downloaded-reports/desktop/blob-report/*.zip -d extracted-reports/desktop + - name: Extract mobile report + run: unzip downloaded-reports/mobile/blob-report/*.zip -d extracted-reports/mobile + - name: Merge the blobs into one single HTML Report - run: npx playwright merge-reports --reporter html downloaded-reports/desktop downloaded-reports/mobile + run: npx playwright merge-reports --reporter html extracted-reports/desktop extracted-reports/mobile - name: Upload full HTML report to artifacts for history if: always() From bd8076e56b83239c9143ace5761b48554733af1f Mon Sep 17 00:00:00 2001 From: MariuszBlajet Date: Wed, 15 May 2024 19:27:07 +0200 Subject: [PATCH 08/11] fix: debug path --- .github/workflows/ci.yml | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 28f7ebe..04590b0 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -86,10 +86,25 @@ jobs: path: downloaded-reports/mobile merge-multiple: true + - name: List contents of downloaded desktop report directory + run: ls -R downloaded-reports/desktop + + - name: List contents of downloaded mobile report directory + run: ls -R downloaded-reports/mobile + - name: Extract desktop report - run: unzip downloaded-reports/desktop/blob-report/*.zip -d extracted-reports/desktop + run: | + mkdir -p extracted-reports/desktop + for file in downloaded-reports/desktop/**/*.zip; do + unzip "$file" -d extracted-reports/desktop || true + done + - name: Extract mobile report - run: unzip downloaded-reports/mobile/blob-report/*.zip -d extracted-reports/mobile + run: | + mkdir -p extracted-reports/mobile + for file in downloaded-reports/mobile/**/*.zip; do + unzip "$file" -d extracted-reports/mobile || true + done - name: Merge the blobs into one single HTML Report run: npx playwright merge-reports --reporter html extracted-reports/desktop extracted-reports/mobile From d9f569e96e3cdd4ae9b5875f2f32d3382df4c08f Mon Sep 17 00:00:00 2001 From: MariuszBlajet Date: Wed, 15 May 2024 19:37:59 +0200 Subject: [PATCH 09/11] fix: ci --- .github/workflows/ci.yml | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 04590b0..5ce2183 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -95,16 +95,18 @@ jobs: - name: Extract desktop report run: | mkdir -p extracted-reports/desktop - for file in downloaded-reports/desktop/**/*.zip; do - unzip "$file" -d extracted-reports/desktop || true - done + unzip downloaded-reports/desktop/report.zip -d extracted-reports/desktop - name: Extract mobile report run: | mkdir -p extracted-reports/mobile - for file in downloaded-reports/mobile/**/*.zip; do - unzip "$file" -d extracted-reports/mobile || true - done + unzip downloaded-reports/mobile/report.zip -d extracted-reports/mobile + + - name: List contents of extracted desktop report directory + run: ls -R extracted-reports/desktop + + - name: List contents of extracted mobile report directory + run: ls -R extracted-reports/mobile - name: Merge the blobs into one single HTML Report run: npx playwright merge-reports --reporter html extracted-reports/desktop extracted-reports/mobile From 59dbe632112d189f0b3b29d7b72f97dc6f0847ac Mon Sep 17 00:00:00 2001 From: MariuszBlajet Date: Wed, 15 May 2024 19:50:01 +0200 Subject: [PATCH 10/11] fix: merging reports --- .github/workflows/ci.yml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5ce2183..841609f 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -92,15 +92,15 @@ jobs: - name: List contents of downloaded mobile report directory run: ls -R downloaded-reports/mobile - - name: Extract desktop report + - name: Extract desktop blob report run: | mkdir -p extracted-reports/desktop - unzip downloaded-reports/desktop/report.zip -d extracted-reports/desktop + unzip downloaded-reports/desktop/*.zip -d extracted-reports/desktop - - name: Extract mobile report + - name: Extract mobile blob report run: | mkdir -p extracted-reports/mobile - unzip downloaded-reports/mobile/report.zip -d extracted-reports/mobile + unzip downloaded-reports/mobile/*.zip -d extracted-reports/mobile - name: List contents of extracted desktop report directory run: ls -R extracted-reports/desktop From 98a75e103a3f0b769f267144b938ef6af93cb558 Mon Sep 17 00:00:00 2001 From: MariuszBlajet Date: Wed, 15 May 2024 20:00:24 +0200 Subject: [PATCH 11/11] fix ci --- .github/workflows/ci.yml | 26 +------------------------- 1 file changed, 1 insertion(+), 25 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 841609f..7e5902c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -78,38 +78,14 @@ jobs: with: name: playwright-test-examples-desktop-${{ github.run_id }} path: downloaded-reports/desktop - merge-multiple: true - name: Download mobile blob report from GitHub Actions Artifacts uses: actions/download-artifact@v4 with: name: playwright-test-examples-mobile-${{ github.run_id }} path: downloaded-reports/mobile - merge-multiple: true - - - name: List contents of downloaded desktop report directory - run: ls -R downloaded-reports/desktop - - - name: List contents of downloaded mobile report directory - run: ls -R downloaded-reports/mobile - - - name: Extract desktop blob report - run: | - mkdir -p extracted-reports/desktop - unzip downloaded-reports/desktop/*.zip -d extracted-reports/desktop - - - name: Extract mobile blob report - run: | - mkdir -p extracted-reports/mobile - unzip downloaded-reports/mobile/*.zip -d extracted-reports/mobile - - - name: List contents of extracted desktop report directory - run: ls -R extracted-reports/desktop - - - name: List contents of extracted mobile report directory - run: ls -R extracted-reports/mobile - name: Merge the blobs into one single HTML Report - run: npx playwright merge-reports --reporter html extracted-reports/desktop extracted-reports/mobile + run: npx playwright merge-reports --reporter html downloaded-reports/desktop blob-report downloaded-reports/mobile blob-report - name: Upload full HTML report to artifacts for history if: always()