add test cases

.github/workflows/playwright.yml

@@ -0,0 +1,51 @@
+# .github/workflows/playwright.yml
+name: Playwright Tests
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        browser: [firefox, webkit, googlechrome]
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v2
+
+      - name: Set Up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Run Playwright Tests
+        run: npx playwright test
+
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-report
+          path: playwright-report
+
+      - name: Upload Videos
+        uses: actions/upload-artifact@v3
+        with:
+          name: test-videos
+          path: test-results/videos
+
+      - name: Upload Screenshots
+        uses: actions/upload-artifact@v3
+        with:
+          name: test-screenshots
+          path: test-results/screenshots
+
+      - name: Upload Traces
+        uses: actions/upload-artifact@v3
+        with:
+          name: test-traces
+          path: test-results/traces

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "the-internet-automation-typescript-playwright",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "playwright test",
+    "test:headed": "playwright test --headed",
+    "test:debug": "playwright test --debug"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@playwright/test": "^1.45.3",
+    "@types/node": "^20.14.12",
+    "playwright": "^1.45.3",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.5.4"
+  }
+}

pages/ABTestingPage.ts

@@ -0,0 +1,21 @@
+import { Page, Locator } from '@playwright/test';
+
+export class ABTestingPage {
+  readonly page: Page;
+  readonly heading: Locator;
+  URL: string;
+
+  constructor(page: Page, URL: string) {
+    this.page = page;
+    this.heading = page.locator('h3');
+    this.URL = URL;
+  }
+
+  async goto() {
+    await this.page.goto(this.URL);
+  }
+
+  async getHeadingText() {
+    return await this.heading.textContent();
+  }
+}

playwright.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+
+  timeout: 30000,
+  use: {
+    headless: true,
+    viewport: { width: 1280, height: 720 },
+    ignoreHTTPSErrors: true,
+    video: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    trace: 'on',
+    baseURL: 'https://the-internet.herokuapp.com',
+
+  },
+  reporter: [
+    ['list'],
+    ['html', { outputFolder: 'playwright-report' }],
+    ['json', { outputFile: 'test-results.json' }],
+    ['junit', { outputFile: 'test-results.xml' }],
+  ],
+
+  retries: 2,
+
+});

test-results.json

@@ -0,0 +1,125 @@
+{
+  "config": {
+    "configFile": "/Users/mnabil/the-internet-automation-typescript-playwright/playwright.config.ts",
+    "rootDir": "/Users/mnabil/the-internet-automation-typescript-playwright/tests",
+    "forbidOnly": false,
+    "fullyParallel": false,
+    "globalSetup": null,
+    "globalTeardown": null,
+    "globalTimeout": 0,
+    "grep": {},
+    "grepInvert": null,
+    "maxFailures": 0,
+    "metadata": {
+      "actualWorkers": 1
+    },
+    "preserveOutput": "always",
+    "reporter": [
+      [
+        "list",
+        null
+      ],
+      [
+        "html",
+        {
+          "outputFolder": "playwright-report"
+        }
+      ],
+      [
+        "json",
+        {
+          "outputFile": "test-results.json"
+        }
+      ],
+      [
+        "junit",
+        {
+          "outputFile": "test-results.xml"
+        }
+      ]
+    ],
+    "reportSlowTests": {
+      "max": 5,
+      "threshold": 15000
+    },
+    "quiet": false,
+    "projects": [
+      {
+        "outputDir": "/Users/mnabil/the-internet-automation-typescript-playwright/test-results",
+        "repeatEach": 1,
+        "retries": 2,
+        "metadata": {},
+        "id": "",
+        "name": "",
+        "testDir": "/Users/mnabil/the-internet-automation-typescript-playwright/tests",
+        "testIgnore": [],
+        "testMatch": [
+          "**/*.@(spec|test).?(c|m)[jt]s?(x)"
+        ],
+        "timeout": 30000
+      }
+    ],
+    "shard": null,
+    "updateSnapshots": "missing",
+    "version": "1.45.3",
+    "workers": 4,
+    "webServer": null
+  },
+  "suites": [
+    {
+      "title": "form_authentication.spec.ts",
+      "file": "form_authentication.spec.ts",
+      "column": 0,
+      "line": 0,
+      "specs": [
+        {
+          "title": "Form Authentication",
+          "ok": true,
+          "tags": [],
+          "tests": [
+            {
+              "timeout": 30000,
+              "annotations": [],
+              "expectedStatus": "passed",
+              "projectId": "",
+              "projectName": "",
+              "results": [
+                {
+                  "workerIndex": 0,
+                  "status": "passed",
+                  "duration": 2896,
+                  "errors": [],
+                  "stdout": [],
+                  "stderr": [],
+                  "retry": 0,
+                  "startTime": "2024-07-24T16:32:35.505Z",
+                  "attachments": [
+                    {
+                      "name": "trace",
+                      "contentType": "application/zip",
+                      "path": "/Users/mnabil/the-internet-automation-typescript-playwright/test-results/form_authentication-Form-Authentication/trace.zip"
+                    }
+                  ]
+                }
+              ],
+              "status": "expected"
+            }
+          ],
+          "id": "6df759fb1ef0caef90bd-a6c447046936b2600450",
+          "file": "form_authentication.spec.ts",
+          "line": 3,
+          "column": 5
+        }
+      ]
+    }
+  ],
+  "errors": [],
+  "stats": {
+    "startTime": "2024-07-24T16:32:35.135Z",
+    "duration": 4046.454,
+    "expected": 1,
+    "skipped": 0,
+    "unexpected": 0,
+    "flaky": 0
+  }
+}

test-results.xml

@@ -0,0 +1,11 @@
+<testsuites id="" name="" tests="1" failures="0" skipped="0" errors="0" time="4.046454">
+<testsuite name="form_authentication.spec.ts" timestamp="2024-07-24T16:32:35.234Z" hostname="" tests="1" failures="0" skipped="0" time="2.896" errors="0">
+<testcase name="Form Authentication" classname="form_authentication.spec.ts" time="2.896">
+<system-out>
+<![CDATA[
+[[ATTACHMENT|test-results/form_authentication-Form-Authentication/trace.zip]]
+]]>
+</system-out>
+</testcase>
+</testsuite>
+</testsuites>

tests/ab_testing.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+import { ABTestingPage } from '../pages/ABTestingPage';
+
+test('A/B Testing', async ({ page }) => {
+  const abTestingPage = new ABTestingPage(page, '/abtest');
+  await abTestingPage.goto();
+  const headingText = await abTestingPage.getHeadingText();
+  await expect(headingText).toContain('A/B Test');
+});

tests/checkboxes.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test('Checkboxes', async ({ page }) => {
+  await page.goto('/checkboxes');
+
+  const checkbox1 = page.locator('input[type="checkbox"]').first();
+  const checkbox2 = page.locator('input[type="checkbox"]').nth(1);
+
+  await expect(checkbox1).not.toBeChecked();
+  await expect(checkbox2).toBeChecked();
+
+});

tests/disappearing_elements.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+
+test('Disappearing Elements', async ({ page }) => {
+  await page.goto('/disappearing_elements');
+  const links = await page.locator('ul > li > a');
+  const expectedLinks = ['Home', 'About', 'Contact Us', 'Portfolio', 'Gallery'];
+  for (const link of expectedLinks) {
+    const linkElement = links.locator(`text=${link}`);
+    if (await linkElement.count() > 0) {
+      await expect(linkElement).toBeVisible();
+    }
+  }
+});

tests/drag_and_drop.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test('Drag and Drop', async ({ page }) => {
+  await page.goto('/drag_and_drop');
+  const source = page.locator('#column-a');
+  const target = page.locator('#column-b');
+  await source.dragTo(target);
+  await expect(source).toHaveText('B');
+  await expect(target).toHaveText('A');
+});

tests/dropdown.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test('Dropdown', async ({ page }) => {
+  await page.goto('/dropdown');
+  const dropdown = page.locator('#dropdown');
+  await dropdown.selectOption('1');
+  await expect(dropdown).toHaveValue('1');
+  await dropdown.selectOption('2');
+  await expect(dropdown).toHaveValue('2');
+});

tests/dynamic_controls.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+
+test('Dynamic Controls', async ({ page }) => {
+  await page.goto('/dynamic_controls');
+
+  // Checkbox
+  const checkbox = page.locator('#checkbox');
+  await expect(checkbox).toBeVisible();
+  await page.click('#checkbox-example button');
+  await expect(checkbox).not.toBeVisible();
+  await page.click('#checkbox-example button');
+  await expect(checkbox).toBeVisible();
+
+  // Input
+  const input = page.locator('#input-example input');
+  await expect(input).toBeDisabled();
+  await page.click('#input-example button');
+  await expect(input).toBeEnabled();
+  await page.click('#input-example button');
+  await expect(input).toBeDisabled();
+});

tests/dynamic_loading.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('Dynamic Loading', async ({ page }) => {
+  await page.goto('/dynamic_loading/1');
+  await page.click('#start button');
+  const finish = await page.locator('#finish');
+  await expect(finish).toContainText('Hello World!');
+});

tests/file_download.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+
+test('File Download with Specified Filename', async ({ page }) => {
+  await page.goto('/download');
+
+  const [download] = await Promise.all([
+    page.waitForEvent('download'),
+    page.click('a[href*="download/"]') // Adjust the selector if necessary
+  ]);
+
+  // Get the suggested filename from the download
+  const suggestedFilename = download.suggestedFilename();
+  console.log(`Suggested filename: ${suggestedFilename}`);
+
+  // Define a custom filename
+  const customFilename = 'test-file.txt';
+  const downloadDir = './downloads';
+  const customFilePath = path.join(downloadDir, customFilename);
+
+  // Ensure the downloads directory exists
+  if (!fs.existsSync(downloadDir)) {
+    fs.mkdirSync(downloadDir);
+  }
+
+  // Save the download to a temporary path
+  const tempFilePath = await download.path();
+
+  // Move the file to the custom path
+  fs.renameSync(tempFilePath!, customFilePath);
+
+  // Verify the file exists at the custom path
+  expect(fs.existsSync(customFilePath)).toBeTruthy();
+  console.log(`File downloaded and renamed to: ${customFilePath}`);
+});