Building a To-Do App using GitHub Actions, Playwright, Next.js
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// @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.
|
1 2 |
/* Run tests in files in parallel */ fullyParallel: false, |
Then go to package.json and add a test script.
|
1 |
"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:
|
1 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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.
