What news from AWS re:Invent last week will have the most impact on you?
Amazon Q, an AI chatbot for explaining how AWS works.
Super-fast S3 Express storage.
New Graviton 4 processor instances.
Emily Freeman leaving AWS.
I don't use AWS, so none of this will affect me.
CI/CD / DevOps / Serverless / Software Development

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
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:

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

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

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:

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:

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.

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.

Group Created with Sketch.
TNS owner Insight Partners is an investor in: Pragma.
THE NEW STACK UPDATE A newsletter digest of the week’s most important stories & analyses.