Mock server

 Using a mock server in end-to-end (E2E) testing is indeed common, and it can be used for more than just reading values. Mock servers simulate the behavior of real servers and can handle various HTTP methods, including POST, PUT, DELETE, and PATCH, in addition to GET. This means you can use a mock server to simulate interactions that involve writing data, such as filling out and submitting forms.

Automating Form Interactions with Mock Servers

1. Simulating Form Submissions: Mock servers can be set up to handle form submissions. When you submit a form in your E2E test, the mock server can capture the request and respond with a predefined response.

2. Validating Data: You can use the mock server to validate the data sent by your application. The mock server can check if the request body matches the expected format and values.

3. Response Handling: After submitting a form, your application typically processes the server's response. The mock server can provide specific responses to test how your application handles different scenarios (e.g., successful submission, validation errors, server errors).

Example with Playwright and Mock Server

Let's say you have a form with fields for username and email, and you want to automate the form submission using Playwright and a mock server.

Mock Server Setup

Using a simple Node.js mock server with Express:

javascript
// mockServer.js
const express = require('express');
const app = express();
app.use(express.json());

app.post('/submit-form', (req, res) => {
  const { username, email } = req.body;
  if (username && email) {
    res.status(200).json({ message: 'Form submitted successfully' });
  } else {
    res.status(400).json({ message: 'Invalid form data' });
  }
});

app.listen(3000, () => {
  console.log('Mock server running on http://localhost:3000');
});

Playwright E2E Test

Using Playwright to automate the form submission:

typescript
// form.spec.ts
import { test, expect } from '@playwright/test';

test('should submit form successfully', async ({ page }) => {
  await page.goto('http://localhost:3000/form'); // Your app's form URL

  await page.fill('#username', 'testuser');
  await page.fill('#email', 'testuser@example.com');

  // Intercept the form submission request and mock the response
  await page.route('**/submit-form', route => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ message: 'Form submitted successfully' }),
    });
  });

  await page.click('#submit-button');

  // Check for success message
  const successMessage = await page.locator('#success-message');
  await expect(successMessage).toHaveText('Form submitted successfully');
});

Benefits of Using Mock Servers in E2E Tests

1. Control Over Responses: You can control the responses from the server, making it easier to test different scenarios without depending on an actual backend.
2. Isolation: Your tests can run in isolation without affecting or depending on the actual server, which is useful for CI/CD pipelines.
3. Speed: Mock servers are generally faster than real servers, which can speed up your test suite.
4. Consistency: The mock server ensures that the responses are consistent, which helps in creating reliable tests.

Summary

Mock servers are versatile tools in E2E testing. They can be used not only for reading data but also for simulating form submissions and other write operations. By intercepting requests and providing predefined responses, mock servers allow you to create controlled and predictable test environments, ensuring your application's interactions are thoroughly tested.