Initial Examples - E2E, Visual, Performance testing

examples/automated-testing-e2e-tests.md

@@ -0,0 +1,110 @@
+# E2E Testing Examples
+
+This file provides examples of E2E tests and some good practices using [Playwright](https://playwright.dev/docs/intro) framework.
+
+---
+
+## Example Tests
+
+### Example 1: Basic E2E Test
+
+This test navigates to the homepage and validates the page title.
+
+```javascript
+import { test, expect } from '@playwright/test';
+
+test('Homepage title verification', async ({ page }) => {
+  await page.goto('/');
+  await expect(page).toHaveTitle(/Hompage/);
+});
+```
+
+### Example 2: User Login Flow
+
+This test covers the login process, ensuring that valid credentials allow access.
+
+```javascript
+import { test, expect } from '@playwright/test';
+
+test('User login flow', async ({ page }) => {
+  await page.goto('/login');
+
+  // Fill in login form
+  await page.getByLabelText('Username').fill('testuser');
+  await page.getByLabelText('Password').fill('password');
+
+  // Submit form
+  await page.getByRole('button', { name: 'Login' }).click();
+
+  // Verify login success
+  await expect(page.locator('.welcome-message')).toContainText(
+    'Welcome, testuser!'
+  );
+});
+```
+
+### Example 3: Form Submission
+
+This test ensures that a form submission works correctly and validates input.
+
+```javascript
+import { test, expect } from '@playwright/test';
+
+test('Form submission test', async ({ page }) => {
+  await page.goto('/form');
+
+  // Fill form fields
+  await page.getByLabelText('Full Name').fill('John Doe');
+  await page.getByLabelText('Email').fill('john.doe@example.com');
+
+  // Submit the form
+  await page.getByRole('button', { name: 'Submit' }).click();
+
+  // Verify submission success
+  await expect(page.locator('.success-message')).toContainText(
+    'Form submitted successfully!'
+  );
+});
+```
+
+### Example 4: Navigation and Multi-step Workflow
+
+This test navigates through a multi-step user workflow.
+
+```javascript
+import { test, expect } from '@playwright/test';
+
+test('Multi-step workflow', async ({ page }) => {
+  await page.goto('https://example.com');
+
+  // Navigate to products
+  await page.getByRole('link', { name: 'Products' }).click();
+  await expect(page).toHaveURL('https://example.com/products');
+
+  // Select a product
+  await page.getByText('Product A').click();
+
+  // Proceed to checkout
+  await page.getByRole('button', { name: 'Checkout' }).click();
+  await expect(page).toHaveURL('https://example.com/checkout');
+
+  // Verify checkout page
+  await expect(page.getByRole('heading')).toContainText('Checkout');
+});
+```
+
+---
+
+## Running Tests
+
+Run the E2E tests using the Playwright test runner:
+
+```bash
+npx playwright test
+```
+
+You can also run specific tests or test files:
+
+```bash
+npx playwright test tests/login.spec.js
+```

examples/automated-testing-performance-tests.md

@@ -0,0 +1,157 @@
+# Performance Testing Examples
+
+This file provides examples of performance tests and some good practices using [k6](https://grafana.com/docs/k6/latest/) framework.
+
+---
+
+## Example Tests
+
+### Example 1: Basic Load Test
+
+This test simulates multiple virtual users (VUs) sending requests to an endpoint to measure response times and error rates.
+
+```javascript
+import http from 'k6/http';
+import { sleep } from 'k6';
+
+export const options = {
+  stages: [
+    { duration: '30s', target: 10 }, // Ramp up to 10 users
+    { duration: '1m', target: 10 }, // Stay at 10 users
+    { duration: '30s', target: 0 }, // Ramp down
+  ],
+};
+
+export default function () {
+  const res = http.get('https://test-api.example.com/endpoint');
+  console.log(`Response time: ${res.timings.duration}ms`);
+  sleep(1);
+}
+```
+
+### Example 2: Stress Test
+
+This test evaluates how the system performs under heavy load, identifying bottlenecks and breaking points.
+
+```javascript
+import http from 'k6/http';
+import { check } from 'k6';
+
+export const options = {
+  stages: [
+    { duration: '1m', target: 50 }, // Ramp up to 50 users
+    { duration: '2m', target: 100 }, // Increase to 100 users
+    { duration: '1m', target: 0 }, // Ramp down
+  ],
+};
+
+export default function () {
+  const res = http.get('https://test-api.example.com/endpoint');
+  check(res, {
+    'status is 200': (r) => r.status === 200,
+    'response time is below 500ms': (r) => r.timings.duration < 500,
+  });
+}
+```
+
+### Example 3: Testing API with Dynamic Parameters
+
+Simulate API requests with dynamic query parameters to test different scenarios.
+
+```javascript
+import http from 'k6/http';
+import { sleep } from 'k6';
+
+export const options = {
+  vus: 10, // Number of virtual users
+  duration: '30s',
+};
+
+export default function () {
+  const userId = Math.floor(Math.random() * 1000); // Random user ID
+  const res = http.get(`https://test-api.example.com/users/${userId}`);
+  console.log(`Checked user ID: ${userId}, Status: ${res.status}`);
+  sleep(1);
+}
+```
+
+### Example 4: Concurrent POST Requests
+
+This test simulates multiple users sending POST requests simultaneously to evaluate server handling of write operations.
+
+```javascript
+import http from 'k6/http';
+
+export const options = {
+  vus: 50,
+  duration: '1m',
+};
+
+export default function () {
+  const payload = JSON.stringify({
+    username: `user_${__VU}`,
+    email: `user_${__VU}@example.com`,
+    password: 'securePassword123',
+  });
+
+  const params = {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  };
+
+  http.post('https://test-api.example.com/register', payload, params);
+}
+```
+
+### Example 5: End-to-End Workflow Simulation
+
+Test a multi-step workflow by simulating user actions across multiple endpoints.
+
+```javascript
+import http from 'k6/http';
+import { sleep, check } from 'k6';
+
+export const options = {
+  vus: 10,
+  duration: '1m',
+};
+
+export default function () {
+  // Step 1: User login
+  const loginRes = http.post('https://test-api.example.com/login', {
+    username: 'testuser',
+    password: 'password123',
+  });
+  check(loginRes, { 'login successful': (res) => res.status === 200 });
+
+  sleep(1);
+
+  // Step 2: Fetch user data
+  const userData = http.get('https://test-api.example.com/user/data');
+  check(userData, { 'user data fetched': (res) => res.status === 200 });
+
+  sleep(1);
+
+  // Step 3: Perform a transaction
+  const transactionRes = http.post('https://test-api.example.com/transaction', {
+    amount: 100,
+    currency: 'USD',
+  });
+  check(transactionRes, {
+    'transaction completed': (res) => res.status === 200,
+  });
+}
+```
+
+---
+
+## Running Tests
+
+Run the performance tests using the k6 CLI:
+
+```bash
+k6 run test-script.js
+```
+
+Replace `test-script.js` with the file name of your test script.

examples/automated-testing-visual-tests.md

@@ -0,0 +1,98 @@
+# Visual Testing Examples
+
+This file provides examples of visual tests and some good practices using [Playwright](https://playwright.dev/docs/intro) as a test runner and [Percy](https://www.browserstack.com/docs/percy/overview/visual-testing-basics) as a visual testing framework.
+
+---
+
+## Example Tests
+
+### Example 1: Capturing a Basic Snapshot
+
+This test navigates to a page and captures a visual snapshot.
+
+```javascript
+import { test } from '@playwright/test';
+import percySnapshot from '@percy/playwright/index.js';
+
+test('Visual snapshot of homepage', async ({ page }) => {
+  await page.goto('/'); // Navigate to the homepage
+  await percySnapshot(page, 'Homepage Snapshot');
+});
+```
+
+### Example 2: Testing Dynamic Content
+
+Use deterministic seeds or mock data to handle dynamic content effectively.
+
+```javascript
+import { test } from '@playwright/test';
+import percySnapshot from '@percy/playwright/index.js';
+
+test('Visual snapshot with mocked content', async ({ page }) => {
+  await page.route('**/api/data', (route) =>
+    route.fulfill({ path: 'mock_data.json' })
+  );
+
+  await page.goto('/dynamic-page');
+  await percySnapshot(page, 'Dynamic Page Snapshot');
+});
+```
+
+### Example 3: Responsive Visual Testing
+
+Capture snapshots at multiple viewport sizes to test responsiveness.
+
+```javascript
+import { test } from '@playwright/test';
+import percySnapshot from '@percy/playwright/index.js';
+
+const viewports = [
+  { width: 375, height: 667 }, // Mobile
+  { width: 768, height: 1024 }, // Tablet
+  { width: 1280, height: 720 }, // Desktop
+];
+
+test.describe('Responsive visual testing', () => {
+  for (const viewport of viewports) {
+    test(`Snapshot at ${viewport.width}x${viewport.height}`, async ({
+      page,
+    }) => {
+      await page.setViewportSize(viewport);
+      await page.goto('/responsive-page');
+      await percySnapshot(
+        page,
+        `Responsive Snapshot - ${viewport.width}x${viewport.height}`
+      );
+    });
+  }
+});
+```
+
+### Example 4: Scope the given snapshot to a specific element
+
+Capture a snapshot of a specific element on the page, for example, a dialog in this example. Snapshot is scoped to the element with the class `.selector` and scrolls to capture the full element.
+
+```javascript
+import { test } from '@playwright/test';
+import percySnapshot from '@percy/playwright/index.js';
+
+test('Visual snapshot of a specific element', async ({ page }) => {
+  await page.goto('/');
+  await percySnapshot(page, 'Specific Element Snapshot', {
+    scope: '.selector',
+    scopeOptions: { scroll: true },
+  });
+});
+```
+
+---
+
+## Running Tests
+
+Run the visual tests using Percy and Playwright:
+
+```bash
+npx percy exec -- npx playwright test
+```
+
+This will execute the tests and upload the snapshots to Percy for comparison.