JS-Playwright

Below is a mockup project structure for a JavaScript automation project using Playwright, Page Object Model (POM), Allure Reports, and GitHub workflows for CI/CD.

Project Structure

my-playwright-project/
├── .github/
│   ├── CODEOWNERS
│   ├── workflows/
│   │   └── nightly-build.yml
│   └── pull_request_template.md
├── reports/               # Allure reports directory
├── src/
│   ├── tests/
│   │   ├── ui/
│   │   │   ├── login.spec.js
│   │   │   ├── dashboard.spec.js
│   │   │   └── helpers.js
│   │   └── api/
│   │       ├── user-api.spec.js
│   │       ├── order-api.spec.js
│   │       └── helpers.js
│   ├── pages/             # Page Object Models for UI tests
│   │   ├── login.page.js
│   │   ├── dashboard.page.js
│   │   └── base.page.js
│   ├── utils/             # Utility functions
│   │   ├── apiUtils.js
│   │   └── testData.js
├── .gitignore             # Git ignore file
├── README.md              # Project documentation
├── playwright.config.js   # Playwright configuration
├── package.json           # NPM package configuration
├── package-lock.json
└── jest.config.js         # Jest configuration (optional)

Key Files

.github/workflows/nightly-build.yml

name: Nightly Build

on:
  push:
    branches:
      - main
  schedule:
    - cron: "0 2 * * *"

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]

    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 18

    - name: Install dependencies
      run: npm ci

    - name: Run tests
      run: npx playwright test --browser=${{ matrix.browser }}

    - name: Generate Allure Report
      run: npx allure generate reports/allure-results --clean && npx allure open

.github/CODEOWNERS

* @username1 @username2

.github/pull_request_template.md

### Description
Please explain the changes made in this PR.

### Checklist
- [ ] Code is linted and clean
- [ ] Tests are added or updated
- [ ] Allure report is reviewed
- [ ] PR is reviewed by a team member

playwright.config.js

const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  testDir: './src/tests',
  timeout: 30000,
  retries: 2,
  reporter: [['line'], ['allure-playwright']],
  use: {
    headless: true,
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'retain-on-failure',
  },
  projects: [
    { name: 'Chromium', use: { browserName: 'chromium' } },
    { name: 'Firefox', use: { browserName: 'firefox' } },
    { name: 'Webkit', use: { browserName: 'webkit' } },
  ],
});

src/pages/login.page.js

class LoginPage {
  constructor(page) {
    this.page = page;
    this.usernameInput = page.locator('#username');
    this.passwordInput = page.locator('#password');
    this.loginButton = page.locator('button[type="submit"]');
  }

  async login(username, password) {
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
  }
}

module.exports = { LoginPage };

src/tests/ui/login.spec.js

const { test, expect } = require('@playwright/test');
const { LoginPage } = require('../../pages/login.page');

test.describe('Login Tests', () => {
  test('User can log in successfully', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await page.goto('https://example.com/login');
    await loginPage.login('user@example.com', 'password123');
    await expect(page).toHaveURL('https://example.com/dashboard');
  });
});

src/tests/api/user-api.spec.js

const { test, expect } = require('@playwright/test');
const apiUtils = require('../../utils/apiUtils');

test.describe('User API Tests', () => {
  test('Fetch user details', async () => {
    const response = await apiUtils.getUserDetails(1);
    expect(response.status).toBe(200);
    expect(response.data).toHaveProperty('id', 1);
  });
});

src/utils/apiUtils.js

const axios = require('axios');

const BASE_URL = 'https://api.example.com';

async function getUserDetails(userId) {
  return axios.get(`${BASE_URL}/users/${userId}`);
}

module.exports = { getUserDetails };

README.md

# Playwright Automation Project

This project is a Playwright-based automation framework designed for UI and API testing.

## Features
- Page Object Model (POM)
- Cross-browser testing (Chromium, Firefox, WebKit)
- Parallel execution
- Allure reports
- GitHub CI/CD integration

## How to Run
1. Install dependencies:
   ```bash
   npm install

2. Run tests:

   npx playwright test
   

3. Generate Allure report:

   npx allure generate reports/allure-results --clean
   npx allure open
   

Directory Structure

• src/tests: Contains test files
• src/pages: Page Object Model implementations
• src/utils: Generic reusable utilities

CI/CD

Automated workflows are set up for nightly builds and PR validations.

#### `.gitignore`
```plaintext
node_modules/
reports/
playwright-report/
allure-results/
.env

This setup is modular, scalable, and ideal for both UI and API testing with integration into CI/CD pipelines. Let me know if you need further customization!