Building a To-Do App using GitHub Actions, Playwright, Next.js

A guide to building a modern web application with a continuous integration pipeline and monitoring it to catch potential errors before production.

Dec 12th, 2022 1:00pm by Burak Kantarci

Featued image for: Building a To-Do App using GitHub Actions, Playwright, Next.js

Image via Pixabay.

In this article, we will build a comprehensive “to-do app” with APIs and end-to-end (E2E) tests using some of the modern stacks together. It will demonstrate how to build a modern web application by using a continuous integration (CI) pipeline and monitor the CI process to catch potential errors before introducing them to production. Here’s the modern stack used in this project:

Next.js to-do app for building the web application
Playwright for end-to-end testing
GitHub Actions for building the CI pipeline
Foresight for CI and test monitoring

Purpose of this Project

The need to create production applications blazingly fast is rapidly increasing in the tech world. Our motivation while creating this project was to contribute to the developer community with an end-to-end stack for a web application. We picked free tools so no one has to pay.

Expected Outcomes

We wanted to create a production-ready serverless sample web application in the simplest possible way. That’s why we chose Upstash to create a Next.js-based application. In the testing phase, we went with the Playwright framework because it makes it pretty easy to work in any browser and platform. We implemented JUnit and generated a test report with it. Deciding on a platform for building a CI pipeline was one of the least challenging decisions for us because GitHub Actions does that pretty well. And finally monitoring both our tests and CI pipelines was something we found pretty challenging. Although there are some tools in the market like Allure for test monitoring and Meercode for CI monitoring, these seemed not so useful at the end of the day. We decided to go with Foresight because it provides deep analytics for both tests and CI pipelines.

Setting up the To-Do App with Next.js

This project requires a Next.js application. If you already have Next.js configured in your system, you can use that. If not, we recommend using the example below. This guide was created by the Upstash team, and it is very minimalistic and easy to understand.

Setting up Tests with Playwright

Run the following command and initialize the Playwright. After quick configurations, you are ready to get started. `npm init playwright@latest`

You can either choose JavaScript or TypeScript.
Give a name to your tests folder.
To run tests on CI, just add a GitHub Actions workflow.

You will have the base Playwright setup after the installation is completed. You will see your test under the tests folder and under the .github folder you will see your GitHub Action `playwright.yml`.

Creating the E2E test

We want to ensure our APIs and user interactions are working properly. So we will add an E2E test, which will add a to-do item and complete it. Under the tests folder, you should create `add.spec.js` file and paste the following code:

// @ts-check
const { test, expect } = require('@playwright/test');
 
const TODO_ITEMS = [
 'buy some cheese',
 'feed the cat',
 'book a doctors appointment'
];
 
test.beforeEach(async ({ page }) => {
 await page.goto('https://localhost:3000/');
});
 
test('add a todo item', async ({ page }) => {
 
 var todoName = TODO_ITEMS[0];
 
 // Text input
 await page.locator('#todo').fill(todoName);
 await page.locator('#todo').press('Enter');
 
 // Make sure the list only has one todo item.
 await expect(page.locator('.Home_card__2SdtB')).toHaveText([
   todoName
 ]);
 
});
 
test('complete a todo item', async ({ page }) => {
 
 var todoName = TODO_ITEMS[0];
 
 // Text input
 await page.click(`.Home_card__2SdtB:has-text("buy some cheese")`);
  // Make sure the list only has one todo item.
 await expect(page.locator('.Home_card__2SdtB')).not.toHaveText([todoName]);
});

In order to run our tests one by one, disable the parallelization in `playwright.config.js`.

 /* Run tests in files in parallel */
 fullyParallel: false,

Then go to `package.json` and add a test script.

  "test": "playwright test"

You will be able to run the test by the `npm run test` command in your terminal and in the GitHub Actions. Run your test and check whether your configuration works correctly so far.

Creating a JUnit Report

To make sure of the health of our tests, we use test reports. JUnit reporter produces a JUnit-style XML report. This is essential for ensuring our to-do web app achieves an acceptable quality level. Add the following in the `playwright.config.js` file:

 reporter: [ ['junit', { outputFile: 'results.xml' }] ],

A file named as `results.xml` will be generated when you run your tests. The test reporter includes the error logs and messages when there is an error.

GitHub Actions Configuration

Push your code to a GitHub repository. The initial `playwright.yml` action will help us to run our test in every commit and pull request. Your configuration should look like this:

on:
 push:
   branches: [ main, master ]
 pull_request:
   branches: [ main, master ]
jobs:
 test:
   timeout-minutes: 60
   runs-on: ubuntu-latest
   steps:
   - uses: actions/checkout@v2
   - uses: actions/setup-node@v2
     with:
       node-version: '14.x'
   - name: Install dependencies
     run: npm ci
   - name: Install Playwright Browsers
     run: npx playwright install --with-deps
   - name: Run Playwright tests
     run: npx playwright test
   - uses: actions/upload-artifact@v2
     if: always()
     with:
       name: playwright-report
       path: playwright-report/
       retention-days: 30

You will be able to see your workflow runs if your Action works. GitHub Action works flawlessly to automate the works you have done manually. You don’t need to run `npm run test` by yourself; GitHub Actions does it automatically when you commit a new code. However, GitHub Actions is not offering enough information about your tests and their performance. When they fail, you need to understand by finding them in a log pile in the workflow run details. We will use Foresight to monitor our tests. It is free for open source projects and requires a simple configuration to start.

Setting up Foresight for Monitoring

Configuring Foresight takes less than two minutes. All you need to do is set up an account, install Foresight’s GitHub app and watch the repository that you’ve initiated for this tutorial. After watching this repository, you need to update your YAML file. You can remove the last step and add Foresight’s test kit.

name: Playwright Tests
on:
 push:
   branches: [ main, master ]
 pull_request:
   branches: [ main, master ]
jobs:
 test:
   timeout-minutes: 60
   runs-on: ubuntu-latest
   steps:
   - uses: actions/checkout@v2
   - uses: actions/setup-node@v2
     with:
       node-version: '14.x'
   - name: Install dependencies
     run: npm ci
   - name: Install Playwright Browsers
     run: npx playwright install --with-deps
   - name: Run Playwright tests
     run: npx playwright test
   - name: Foresight test kit
     if: success() || failure()
     uses: runforesight/foresight-test-kit-action@v1
     	with:
       api_key: ${{ secrets.FRS_PROD_API_KEY }}
       test_format: JUNIT
       test_framework: JEST
       test_path: ./results.xml

As you can see, we entered the format, framework and path fields by the configuration we’ve created above. This action will automatically send your test report to Foresight, and Foresight will analyze your tests in the most user-friendly way. After updating your YAML, your workflow will run automatically, and you will be able to see your workflow run results. The Foresight UI is similar to GitHub Actions. It gives you the ability to trace your CI workflow steps, gather all the metrics together, and monitor and debug your tests. You can learn more about Foresight from its documentation.

Summing up

That’s it! We created this project with the hope of helping the developer community by showcasing how easily and cost-free you can create a production-ready web application.

Burak Kantarcic, director of product at Thundra, speaks and writes about DevOps, testing and product management.