DEV Community: Amruta

Automating Testing with Playwright and TypeScript: A Guide for Developers

Amruta — Thu, 21 Nov 2024 18:10:06 +0000

Automated testing is a crucial aspect of web development, ensuring that applications behave as expected under various conditions. When working with public APIs, like a weather API, it’s important to verify the accuracy of the data and the API’s responsiveness. Playwright, with its powerful testing capabilities, paired with TypeScript, provides an efficient way to automate these tests.

In this article, we'll explore how to write a simple Playwright test in TypeScript for a public weather API, while emphasizing the importance of Playwright in development.

Why Use Playwright for API Testing?

Playwright is generally known for its powerful browser automation features, but it's also highly effective for testing APIs. Here’s why it’s important:

End-to-end API Testing: Playwright allows you to test entire workflows, ensuring that the application correctly fetches, processes, and displays data from APIs like a weather service.
Real-world Scenarios: Simulating network conditions (e.g., slow connections or offline mode) and validating how your application handles such situations helps ensure robust API integration.
Cross-browser Simulation: Playwright tests how the API response is handled across different browsers (Chromium, Firefox, WebKit), ensuring consistent behaviour regardless of the environment.
TypeScript for Type Safety: Using TypeScript ensures that your tests are type-safe, making them easier to maintain, debug, and extend.

Setting Up Playwright with TypeScript

Before we start writing the test, let’s set up Playwright with TypeScript in a Node.js project.

Step 1: Initialize the Project

Create a new folder for your project and initialize it with npm.

mkdir playwright-api-demo
cd playwright-api-demo
npm init -y

Step 2: Install Dependencies

Next, install Playwright and the required TypeScript packages.

npm install playwright
npm install -D typescript ts-node

Step 3: Initialize Playwright

Run the following command to install the necessary browsers and initialize Playwright.

npx playwright install

Step 4: Configure TypeScript

Create a tsconfig.json file to configure TypeScript settings.

npx tsc --init

Make sure your tsconfig.json looks something like this:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Writing the Playwright Test for a Weather API

Step 1: Create a Test File

Create a folder called tests/ and add a test file for the API.

mkdir tests
touch tests/weatherApi.spec.ts

Step 2: Write the Test

Here, we’ll write a Playwright test in TypeScript to validate the response from a weather API. We'll use a public weather API (such as OpenWeatherMap or any free weather API).

Here’s the test code in weatherApi.spec.ts:

import { test, expect } from '@playwright/test';

const API_URL = 'https://api.openweathermap.org/data/2.5/weather';
const CITY = 'London';
const API_KEY = 'your_api_key';  // Replace with your actual API key

test('Weather API should return the correct data for a city', async ({ request }) => {
  // Send a GET request to the weather API
  const response = await request.get(`${API_URL}?q=${CITY}&appid=${API_KEY}&units=metric`);

  // Check if the API request was successful
  expect(response.status()).toBe(200);

  // Parse the JSON response
  const weatherData = await response.json();

  // Validate that the response contains expected city name and main temperature data
  expect(weatherData.name).toBe(CITY);
  expect(weatherData.main).toHaveProperty('temp');
  expect(weatherData.main).toHaveProperty('humidity');
  expect(weatherData.weather.length).toBeGreaterThan(0);
});

Step 3: Understanding the Code

Test Structure: We define a test using Playwright’s test() function, providing a description and an async function that holds the test logic.
API Request: We use Playwright’s request.get() to send a GET request to the weather API. The URL includes the city name (London), the API key (your_api_key), and query parameters to get the weather data in metric units.
Assertions:
- We check that the API returns a 200 status code, meaning the request was successful.
- We parse the JSON response using response.json(), then use expect() to validate that the returned data includes the correct city name and weather details like temperature and humidity.

Step 4: Run the Test

To run the Playwright test, use the following command:

npx playwright test

Playwright will run the test, make the API request, and validate the response.

Why Playwright for API Testing?

Playwright’s ability to handle API requests directly within the same test run, combined with its strong integration with browser automation, makes it a perfect tool for end-to-end testing. Here’s why it’s especially useful in development:

Full Workflow Testing: In a real-world application, API calls are rarely made in isolation. You’ll often want to test the integration of the API with your front-end. Playwright can combine browser automation (e.g., checking that the UI properly displays weather data) and API testing in a single workflow.
Simulating User Scenarios: You can simulate real user behavior, such as fetching weather data based on user input, testing different API endpoints (e.g., by city or GPS location), and checking how the application handles network issues or slow responses.
Cross-browser Compatibility: Playwright ensures that the API responses are handled consistently across multiple browsers, which is essential for delivering a consistent user experience.
CI/CD Integration: Playwright integrates easily with CI/CD pipelines, allowing you to continuously test your API integration. This ensures that your application works reliably, even as you add new features or updates to the API.
Handling Complex Scenarios: Playwright allows you to mock API responses, simulate slow or failed API requests, and test edge cases like network throttling, ensuring your app can handle real-world scenarios.

Conclusion

Playwright, combined with TypeScript, offers an efficient and scalable approach to testing public APIs like a weather service. By automating API tests, you ensure the accuracy of your application’s data, improve its reliability, and catch issues early in the development cycle. The ease of setup, flexibility, and integration with broader testing scenarios make Playwright an indispensable tool for developers aiming to create high-quality, stable applications.

By adopting Playwright for API testing, developers can confidently release applications that interact with external APIs, ensuring both functionality and consistency across different environments.

Guide to Test-Driven Development (TDD) in Laravel: A Step-by-Step Example

Amruta — Thu, 21 Nov 2024 18:02:14 +0000

Test-Driven Development (TDD) is a methodology where tests are written before the actual code. This approach ensures that every piece of your application works as expected, and it helps prevent bugs early in the development process. In this guide, we’ll explore how to implement TDD in Laravel with a real-world example.

What is TDD?

TDD follows a simple cycle called Red-Green-Refactor:

Red – Write a test for a new feature and watch it fail (since no code has been written yet).
Green – Write the minimum amount of code required to pass the test.
Refactor – Improve the code without changing its behaviour.

Setting Up Laravel for Testing

Before jumping into writing tests, you need to set up Laravel's testing environment. Laravel uses PHPUnit, which comes pre-installed.

Install Laravel: If you haven’t already installed Laravel, you can do so with the following command:

   composer create-project --prefer-dist laravel/laravel tdd-example

Set Up a Testing Database: By default, Laravel uses SQLite for testing, but you can configure other databases if needed.

In .env.testing, define a separate testing database:

   DB_CONNECTION=sqlite
   DB_DATABASE=:memory:

Run Tests: Laravel’s default testing setup includes some example tests. You can run them using:

   php artisan test

You should see an output showing which tests have passed or failed.

Building a Feature Using TDD: Todo List Example

Let's walk through building a simple "To-Do List" feature using TDD.

1. Write the Test (Red Phase)

Our goal is to create a Todo model, and we want to ensure users can add a new item to the list.

Let's write the test first:

php artisan make:test TodoTest

In tests/Feature/TodoTest.php, write the following test:

<?php

namespace Tests\Feature;

use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;
use App\Models\Todo;

class TodoTest extends TestCase
{
    use RefreshDatabase;

    /** @test */
    public function a_todo_can_be_created()
    {
        $response = $this->post('/todos', [
            'title' => 'Buy groceries',
        ]);

        $response->assertStatus(201);
        $this->assertCount(1, Todo::all());
    }
}

This test checks:

Whether we can send a POST request to /todos to create a new to-do item.
If the item is successfully created, it asserts that the response status is 201.
It checks the database to ensure a new item has been added.

Now, run the test:

php artisan test

The test will fail since we haven't written the actual functionality yet. This is the "Red" phase.

2. Write the Code (Green Phase)

Next, we’ll write the minimum amount of code to make the test pass.

Create the Todo Model:

   php artisan make:model Todo -m

This will generate a Todo model and a migration file.

Update the Migration: In database/migrations/xxxx_xx_xx_create_todos_table.php, modify the migration:

   public function up()
   {
       Schema::create('todos', function (Blueprint $table) {
           $table->id();
           $table->string('title');
           $table->timestamps();
       });
   }

Then, run the migration:

   php artisan migrate

Define the Route and Controller: Now, we’ll create the route and controller for handling the POST request.

In routes/web.php:

   use App\Models\Todo;
   use Illuminate\Http\Request;

   Route::post('/todos', function (Request $request) {
       Todo::create($request->validate([
           'title' => 'required',
       ]));

       return response()->json([], 201);
   });

Ensure the Todo model is mass-assignable by adding the $fillable attribute to app/Models/Todo.php:

   protected $fillable = ['title'];

Re-run the Test: Now that we’ve written the code to handle the creation of a todo, rerun the test:

   php artisan test

If everything is correct, the test should pass. This is the "Green" phase.

3. Refactor the Code (Refactor Phase)

With the test passing, now is the time to clean up the code or make improvements. Since this example is fairly simple, we don’t have much to refactor, but in real-world projects, you might extract methods, rename variables, or optimize queries at this stage.

Writing More Tests: Expanding the Todo Feature

Once the basic functionality is complete, you can continue adding more features with TDD. For example:

Test for Viewing All Todos

You might want a test that ensures users can view all the to-do items:

/** @test */
public function todos_can_be_fetched()
{
    Todo::factory()->create(['title' => 'First task']);
    Todo::factory()->create(['title' => 'Second task']);

    $response = $this->get('/todos');

    $response->assertStatus(200);
    $response->assertJsonCount(2);
}

In routes/web.php, add the GET route:

Route::get('/todos', function () {
    return Todo::all();
});

Test for Deleting a Todo

Write a test for deleting an existing to-do item:

/** @test */
public function a_todo_can_be_deleted()
{
    $todo = Todo::factory()->create();

    $response = $this->delete('/todos/' . $todo->id);

    $response->assertStatus(200);
    $this->assertCount(0, Todo::all());
}

Update routes/web.php with the route for deletion:

Route::delete('/todos/{id}', function ($id) {
    Todo::findOrFail($id)->delete();
    return response()->json([], 200);
});

Benefits of TDD in Laravel

Fewer Bugs: Since you’re writing tests before the code, you catch issues early.
Confidence: You can refactor your code without fear of breaking functionality.
Documentation: Tests serve as documentation by demonstrating how your code is intended to work.

Conclusion

Test-driven development is a powerful practice that ensures your Laravel applications are robust and maintainable. By following the Red-Green-Refactor cycle, you write better, more reliable code. This guide walked you through a simple example of implementing TDD in Laravel, but the principles apply to more complex applications.

By writing tests first, you develop your applications with confidence, knowing that every new feature is thoroughly validated.

Advanced Error Handling in Node.js

Amruta — Tue, 04 Jun 2024 14:02:28 +0000

Error handling is an important aspect of software development that ensures your application behaves predictably and provides meaningful feedback when something goes wrong. In Node.js, effective error handling can be particularly challenging due to its asynchronous nature. This article delves into advanced techniques and best practices for managing errors in Node.js applications.

Understanding Error Types

Before diving into error handling strategies, it’s important to understand the types of errors you might encounter:

Synchronous Errors:
The errors that occur during the execution of synchronous code, can be caught using try-catch blocks.
Asynchronous Errors:
The errors occur during the execution of asynchronous code, such as callbacks, promises, and async/await functions.
Operational Errors:
Errors that represent runtime problems that the program is expected to handle (e.g., failing to connect to a database).
Programmer Errors:
Bugs in the program (e.g., type errors, assertion failures). These should generally not be caught and handled in the same way as operational errors.

Synchronous Error Handling

For synchronous code, error handling is using try-catch blocks:

try {
  // Synchronous code that might throw an error
  let result = dafaultFunction();
} catch (error) {
  console.error('An error occurred:', error.message);
  // Handle the error appropriately
}

Asynchronous Error Handling

Callbacks

In callback-based asynchronous code, errors are usually the first argument in the callback function:

const fs = require('fs');
fs.readFile('/path/to/file', (err, data) => {
  if (err) {
    console.error('An error occurred:', err.message);
    // Handle the error
    return;
  }
  // Process the data
});

Promises

Promises offer a cleaner way to handle asynchronous errors using .catch():

const fs = require('fs').promises;
fs.readFile('/path/to/file')
  .then(data => {
    // Process the data
  })
  .catch(err => {
    console.error('An error occurred:', err.message);
    // Handle the error
  });

Async/Await

Async/await syntax allows for a more synchronous style of error handling in asynchronous code:

const fs = require('fs').promises;
async function readFile() {
  try {
    const data = await fs.readFile('/path/to/file');
    // Process the data
  } catch (err) {
    console.error('An error occurred:', err.message);
    // Handle the error
  }
}
readFile();

Centralized Error Handling

For larger applications, centralized error handling can help manage errors more effectively. This often involves middleware in Express.js applications.

Express.js Middleware

Express.js provides a mechanism for handling errors via middleware. This middleware should be the last in the stack:

const express = require('express');
const app = express();

// Define routes and other middleware
app.get('/', (req, res) => {
  throw new Error('Something went wrong!');
});

// Error-handling middleware
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).json({ message: 'Internal Server Error' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Advanced Techniques

Custom Error Classes

Creating custom error classes can help distinguish between different types of errors and make error handling more granular:

class AppError extends Error {
  constructor(message, statusCode) {
    super(message);
    this.statusCode = statusCode;
    Error.captureStackTrace(this, this.constructor);
  }
}

// Usage
try {
  throw new AppError('Custom error message', 400);
} catch (error) {
  if (error instanceof AppError) {
    console.error(`AppError: ${error.message} (status: ${error.statusCode})`);
  } else {
    console.error('An unexpected error occurred:', error);
  }
}

Error Logging

Implement robust error logging to monitor and diagnose issues. Tools like Winston or Bunyan can help with logging:

const winston = require('winston');
const logger = winston.createLogger({
  level: 'error',
  format: winston.format.json(),
  transports: [
    new winston.transports.File({ filename: 'error.log' })
  ]
});

// Usage
try {
  // Code that might throw an error
  throw new Error('Something went wrong');
} catch (error) {
  logger.error(error.message, { stack: error.stack });
}

Global Error Handling

Handling uncaught exceptions and unhandled promise rejections ensures that no errors slip through unnoticed:

process.on('uncaughtException', (error) => {
  console.error('Uncaught Exception:', error);
  // Perform cleanup and exit process if necessary
});
process.on('unhandledRejection', (reason, promise) => {
  console.error('Unhandled Rejection at:', promise, 'reason:', reason);
  // Perform cleanup and exit process if necessary
});

Best Practices

Fail Fast: Detect and handle errors as early as possible.
Graceful Shutdown: Ensure your application can shut down gracefully in the event of a critical error.
Meaningful Error Messages: Provide clear and actionable error messages.
Avoid Silent Failures: Always log or handle errors to avoid silent failures.
Test Error Scenarios: Write tests to cover potential error scenarios and ensure your error handling works as expected.

Conclusion

To effectively handle errors in Node.js, you need to use a combination of synchronous and asynchronous techniques, centralized management, and advanced strategies such as custom error classes and robust logging. By incorporating these best practices and advanced techniques, you can create robust Node.js applications that gracefully handle errors and offer an improved experience for your users.

Security Best Practices in Web Development

Amruta — Wed, 29 May 2024 08:43:03 +0000

As web developers, it's crucial to prioritize application security. With increasing cyber threats, implementing robust security measures is essential. This article covers best practices for securing web applications.

1. Secure Coding Practices

Input Validation and Sanitization

User input is a common attack vector. Validate and sanitize inputs to prevent injection attacks such as SQL injection, XSS, and command injection. Validation ensures proper format, length, and type, while sanitization removes or encodes harmful characters.

// Input validation and sanitization example in PHP
$user_input = filter_input(INPUT_POST, 'username', FILTER_SANITIZE_STRING);
if (!preg_match("/^[a-zA-Z0-9]*$/", $user_input)) {
    // Handle invalid input
}

Avoiding Hardcoded Credentials

Never hardcode sensitive information like API keys, passwords, or secret tokens in your source code. Use environment variables or secure vault services to manage sensitive data.

// Using environment variables in PHP
$api_key = getenv('API_KEY');

2. Authentication and Authorization

Implement Strong Authentication

Use strong, multifactor authentication (MFA) methods to improve security. Passwords should be securely hashed using a strong algorithm such as bcrypt.

// Example of hashing a password with bcrypt in PHP
$password = 'user_password';
$hashed_password = password_hash($password, PASSWORD_BCRYPT);

Use Secure Session Management

Ensure session tokens are securely generated and stored. Use HTTPOnly and Secure flags for cookies to prevent access through JavaScript and enforce secure transmission.

// Setting secure session cookies in PHP
session_set_cookie_params([
    'httponly' => true,
    'secure' => true,
    'samesite' => 'Strict'
]);
session_start();

3. Data Protection

Encrypt Sensitive Data

Encrypt sensitive data at rest and in transit. Use HTTPS for all communications between the client and server.

// Example of enabling HTTPS in an Apache server configuration
// Ensure the following is in your Apache configuration file (httpd.conf or apache2.conf)
<VirtualHost *:443>
    DocumentRoot "/var/www/html"
    ServerName www.example.com
    SSLEngine on
    SSLCertificateFile "/path/to/your_certificate.crt"
    SSLCertificateKeyFile "/path/to/your_private.key"
</VirtualHost>

Regular Backups

Regularly back up your data to mitigate data loss in case of a security breach. Ensure backups are also encrypted and securely stored.

4. Implement Security Headers

HTTP Security Headers

Use HTTP security headers to protect against common attacks. Some important headers include:
Content-Security-Policy (CSP): Prevents XSS by specifying allowed sources of content.
X-Content-Type-Options: Prevents MIME type sniffing.
Strict-Transport-Security (HSTS): Enforces HTTPS connections.

// Setting security headers in PHP
header('Content-Security-Policy: default-src https:');
header('X-Content-Type-Options: nosniff');
header('Strict-Transport-Security: max-age=31536000; includeSubDomains');

5. Secure Your Dependencies

Use Trusted Libraries and Frameworks

Always use well-maintained and trusted libraries and frameworks. Regularly update dependencies to patch known vulnerabilities.

Monitor for Vulnerabilities

Use tools like Composer's Security Checker or OWASP Dependency-Check to scan for vulnerabilities in your dependencies.

Conclusion

Implementing these security best practices can significantly reduce the risk of security breaches and protect your web applications from common threats. Remember that security is an ongoing process and requires continuous monitoring, updating, and education.