Mobile view sample pages

.github/workflows/ci.yml

@@ -9,70 +9,98 @@ 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:
             node-version: 18
       - 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:
           name: merged-playwright-report-${{ steps.timestampid.outputs.timestamp }} 
           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 }}
           publish_dir: ./playwright-report
           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
+        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

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": "",

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');

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'] },
+		},
 	],
 });

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);