From d2a9cbfe6436bcdd1440819252af3931ad24909a Mon Sep 17 00:00:00 2001 From: Marko Lovric Date: Thu, 9 Jan 2025 21:49:08 +0100 Subject: [PATCH 1/3] Add initial E2E testing examples --- examples/automated-testing-e2e-tests.md | 110 ++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 examples/automated-testing-e2e-tests.md diff --git a/examples/automated-testing-e2e-tests.md b/examples/automated-testing-e2e-tests.md new file mode 100644 index 0000000..6cdbe91 --- /dev/null +++ b/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 +``` From db2b441fa040491bb61d3decac61888ea29fb4ce Mon Sep 17 00:00:00 2001 From: Marko Lovric Date: Thu, 9 Jan 2025 21:49:19 +0100 Subject: [PATCH 2/3] Add initial performance testing examples --- .../automated-testing-performance-tests.md | 157 ++++++++++++++++++ 1 file changed, 157 insertions(+) create mode 100644 examples/automated-testing-performance-tests.md diff --git a/examples/automated-testing-performance-tests.md b/examples/automated-testing-performance-tests.md new file mode 100644 index 0000000..6df111c --- /dev/null +++ b/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. From 5fb599ba5e44a4e06e5129664c362adb98049baf Mon Sep 17 00:00:00 2001 From: Marko Lovric Date: Thu, 9 Jan 2025 21:49:31 +0100 Subject: [PATCH 3/3] Add initial visual testing examples --- examples/automated-testing-visual-tests.md | 98 ++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 examples/automated-testing-visual-tests.md diff --git a/examples/automated-testing-visual-tests.md b/examples/automated-testing-visual-tests.md new file mode 100644 index 0000000..56f03c6 --- /dev/null +++ b/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.