diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5769104..7e5902c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -9,40 +9,63 @@ on: - main workflow_dispatch: -jobs: - playwright-test-examples: +jobs: + playwright-desktop-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 - - 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 + - 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 + 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-mobile-${{ github.run_id }} + path: blob-report + retention-days: 5 merge-reports-and-upload: if: always() - needs: [playwright-test-examples] + needs: [playwright-desktop-test-examples, playwright-mobile-test-examples] runs-on: ubuntu-latest outputs: timestamp: ${{ steps.timestampid.outputs.timestamp }} 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: @@ -50,16 +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-reports/desktop + - name: Download mobile blob report from GitHub Actions Artifacts uses: actions/download-artifact@v4 with: - name: playwright-test-examples - path: downloaded-merged-reports-as-blob + name: playwright-test-examples-mobile-${{ github.run_id }} + 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: @@ -67,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 }} @@ -75,4 +103,4 @@ 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 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/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 b851238..202575e 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -17,8 +17,13 @@ export default defineConfig({ }, projects: [ { - name: 'chromium', + name: 'desktop', use: { ...devices['Desktop Chrome'] }, }, + { + 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);