Constructing a To-Do App utilizing GitHub Actions, Playwright, Subsequent.js

Table of Contents

On this article, we’ll construct a complete “to-do app” with APIs and end-to-end (E2E) assessments utilizing among the fashionable stacks collectively. It would exhibit easy methods to construct a contemporary net utility by utilizing a steady integration (CI) pipeline and monitor the CI course of to catch potential errors earlier than introducing them to manufacturing.

Right here’s the trendy stack used on this mission:

Subsequent.js to-do app for constructing the net utility
Playwright for end-to-end testing
GitHub Actions for constructing the CI pipeline
Foresight for CI and take a look at monitoring

Objective of this Venture

The necessity to create manufacturing functions blazingly quick is quickly rising within the tech world. Our motivation whereas creating this mission was to contribute to the developer neighborhood with an end-to-end stack for an internet utility. We picked free instruments so nobody has to pay.

Anticipated Outcomes

We wished to create a production-ready serverless pattern net utility within the easiest doable approach. That’s why we selected Upstash to create a Subsequent.js-based utility.

Within the testing part, we went with the Playwright framework as a result of it makes it fairly straightforward to work in any browser and platform. We carried out JUnit and generated a take a look at report with it.

Deciding on a platform for constructing a CI pipeline was one of many least difficult choices for us as a result of GitHub Actions does that fairly nicely.

And at last monitoring each our assessments and CI pipelines was one thing we discovered fairly difficult. Though there are some instruments available in the market like Attract for take a look at monitoring and Meercode for CI monitoring, these appeared not so helpful on the finish of the day. We determined to go together with Foresight as a result of it offers deep analytics for each assessments and CI pipelines.

Establishing the To-Do App with Subsequent.js

This mission requires a Subsequent.js utility. If you have already got Subsequent.js configured in your system, you need to use that. If not, we suggest utilizing the instance under.

This information was created by the Upstash workforce, and it is vitally minimalistic and simple to know.

Establishing Assessments with Playwright

Run the next command and initialize the Playwright. After fast configurations, you might be able to get began.

npm init [email protected]



You possibly can both select JavaScript or TypeScript.
Give a reputation to your assessments folder.
To run assessments on CI, simply add a GitHub Actions workflow.

You’ll have the bottom Playwright setup after the set up is accomplished. You will notice your take a look at below the assessments folder and below the .github folder you will note your GitHub Motion playwright.yml.
Creating the E2E take a look at
We need to guarantee our APIs and consumer interactions are working correctly. So we’ll add an E2E take a look at, which can add a to-do merchandise and full it.
Below the assessments folder, it’s best to create add.spec.js file and paste the next code:

<br />
// @ts-check<br />
const { take a look at, anticipate } = require(‘@playwright/take a look at’);<br />
 <br />
const TODO_ITEMS = [<br />
 ‘buy some cheese’,<br />
 ‘feed the cat’,<br />
 ‘book a doctors appointment’<br />
];<br />
 <br />
take a look at.beforeEach(async ({ web page }) => {<br />
 await web page.goto(‘https://localhost:3000/’);<br />
});<br />
 <br />
take a look at(‘add a todo merchandise’, async ({ web page }) => {<br />
 <br />
 var todoName = TODO_ITEMS[0];<br />
 <br />
 // Textual content enter<br />
 await web page.locator(‘#todo’).fill(todoName);<br />
 await web page.locator(‘#todo’).press(‘Enter’);<br />
 <br />
 // Be certain the checklist solely has one todo merchandise.<br />
 await anticipate(web page.locator(‘.Home_card__2SdtB’)).toHaveText([<br />
   todoName<br />
 ]);<br />
 <br />
});<br />
 <br />
take a look at(‘full a todo merchandise’, async ({ web page }) => {<br />
 <br />
 var todoName = TODO_ITEMS[0];<br />
 <br />
 // Textual content enter<br />
 await web page.click on(`.Home_card__2SdtB:has-text(“purchase some cheese”)`);<br />
  // Be certain the checklist solely has one todo merchandise.<br />
 await anticipate(web page.locator(‘.Home_card__2SdtB’)).not.toHaveText([todoName]);<br />
});





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 { take a look at, anticipate } = require(‘@playwright/take a look at’);
const TODO_ITEMS = [
 ‘buy some cheese’,
 ‘feed the cat’,
 ‘book a doctors appointment’
];
take a look at.beforeEach(async ({ web page }) => {
 await web page.goto(‘https://localhost:3000/’);
});
take a look at(‘add a todo merchandise’, async ({ web page }) => {
 var todoName = TODO_ITEMS[0];
 // Textual content enter
 await web page.locator(‘#todo’).fill(todoName);
 await web page.locator(‘#todo’).press(‘Enter’);
 // Be certain the checklist solely has one todo merchandise.
 await anticipate(web page.locator(‘.Home_card__2SdtB’)).toHaveText([
   todoName
 ]);
});
take a look at(‘full a todo merchandise’, async ({ web page }) => {
 var todoName = TODO_ITEMS[0];
 // Textual content enter
 await web page.click on(`.Home_card__2SdtB:has–textual content(“purchase some cheese”)`);
  // Be certain the checklist solely has one todo merchandise.
 await anticipate(web page.locator(‘.Home_card__2SdtB’)).not.toHaveText([todoName]);
});






With a view to run our assessments one after the other, disable the parallelization in playwright.config.js.

<br />
 /* Run assessments in information in parallel */<br />
 fullyParallel: false,







 /* Run assessments in information in parallel */
 fullyParallel: false,






Then go to bundle.json and add a take a look at script.

<br />
  “take a look at”: “playwright take a look at”







  “take a look at”: “playwright take a look at”






It is possible for you to to run the take a look at by the npm run take a look at command in your terminal and within the GitHub Actions.
Run your take a look at and test whether or not your configuration works appropriately to this point.
Making a JUnit Report
To verify of the well being of our assessments, we use take a look at experiences. JUnit reporter produces a JUnit-style XML report. That is important for guaranteeing our to-do net app achieves a suitable high quality degree.
Add the next within the playwright.config.js file:

<br />
 reporter: [ [‘junit’, { outputFile: ‘results.xml’ }] ],







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






A file named as outcomes.xml will probably be generated if you run your assessments.
The take a look at reporter contains the error logs and messages when there may be an error.
GitHub Actions Configuration
Push your code to a GitHub repository. The preliminary playwright.yml motion will assist us to run our take a look at in each commit and pull request. Your configuration ought to seem like this:

<br />
on:<br />
 push:<br />
   branches: [ main, master ]<br />
 pull_request:<br />
   branches: [ main, master ]<br />
jobs:<br />
 take a look at:<br />
   timeout-minutes: 60<br />
   runs-on: ubuntu-latest<br />
   steps:<br />
   – makes use of: actions/checkout@v2<br />
   – makes use of: actions/setup-node@v2<br />
     with:<br />
       node-version: ’14.x’<br />
   – title: Set up dependencies<br />
     run: npm ci<br />
   – title: Set up Playwright Browsers<br />
     run: npx playwright set up –with-deps<br />
   – title: Run Playwright assessments<br />
     run: npx playwright take a look at<br />
   – makes use of: actions/upload-artifact@v2<br />
     if: all the time()<br />
     with:<br />
       title: playwright-report<br />
       path: playwright-report/<br />
       retention-days: 30





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:
 take a look at:
   timeout–minutes: 60
   runs–on: ubuntu–newest
   steps:
   – makes use of: actions/checkout@v2
   – makes use of: actions/setup–node@v2
     with:
       node–model: ’14.x’
   – title: Set up dependencies
     run: npm ci
   – title: Set up Playwright Browsers
     run: npx playwright set up —with–deps
   – title: Run Playwright assessments
     run: npx playwright take a look at
   – makes use of: actions/add–artifact@v2
     if: all the time()
     with:
       title: playwright–report
       path: playwright–report/
       retention–days: 30






It is possible for you to to see your workflow runs in case your Motion works.
GitHub Motion works flawlessly to automate the works you could have completed manually. You don’t must run npm run take a look at by your self; GitHub Actions does it robotically if you commit a brand new code. Nevertheless, GitHub Actions shouldn’t be providing sufficient details about your assessments and their efficiency. After they fail, you should perceive by discovering them in a log pile within the workflow run particulars.
We are going to use Foresight to observe our assessments. It’s free for open supply tasks and requires a easy configuration to begin.
Establishing Foresight for Monitoring
Configuring Foresight takes lower than two minutes. All you should do is about up an account, set up Foresight’s GitHub app and watch the repository that you simply’ve initiated for this tutorial.
After watching this repository, you should replace your YAML file. You possibly can take away the final step and add Foresight’s take a look at package.

<br />
title: Playwright Assessments<br />
on:<br />
 push:<br />
   branches: [ main, master ]<br />
 pull_request:<br />
   branches: [ main, master ]<br />
jobs:<br />
 take a look at:<br />
   timeout-minutes: 60<br />
   runs-on: ubuntu-latest<br />
   steps:<br />
   – makes use of: actions/checkout@v2<br />
   – makes use of: actions/setup-node@v2<br />
     with:<br />
       node-version: ’14.x’<br />
   – title: Set up dependencies<br />
     run: npm ci<br />
   – title: Set up Playwright Browsers<br />
     run: npx playwright set up –with-deps<br />
   – title: Run Playwright assessments<br />
     run: npx playwright take a look at<br />
   – title: Foresight take a look at package<br />
     if: success() || failure()<br />
     makes use of: runforesight/foresight-test-kit-action@v1<br />
     	with:<br />
       api_key: ${{ secrets and techniques.FRS_PROD_API_KEY }}<br />
       test_format: JUNIT<br />
       test_framework: JEST<br />
       test_path: ./outcomes.xml





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




title: Playwright Assessments
on:
 push:
   branches: [ main, master ]
 pull_request:
   branches: [ main, master ]
jobs:
 take a look at:
   timeout–minutes: 60
   runs–on: ubuntu–newest
   steps:
   – makes use of: actions/checkout@v2
   – makes use of: actions/setup–node@v2
     with:
       node–model: ’14.x’
   – title: Set up dependencies
     run: npm ci
   – title: Set up Playwright Browsers
     run: npx playwright set up —with–deps
   – title: Run Playwright assessments
     run: npx playwright take a look at
   – title: Foresight take a look at package
     if: success() || failure()
     makes use of: runforesight/foresight–take a look at–package–motion@v1
     with:
       api_key: ${{ secrets and techniques.FRS_PROD_API_KEY }}
       test_format: JUNIT
       test_framework: JEST
       test_path: ./outcomes.xml






As you may see, we entered the format, framework and path fields by the configuration we’ve created above.
This motion will robotically ship your take a look at report back to Foresight, and Foresight will analyze your assessments in essentially the most user-friendly approach. After updating your YAML, your workflow will run robotically, and it is possible for you to to see your workflow run outcomes.
The Foresight UI is much like GitHub Actions. It provides you the power to hint your CI workflow steps, collect all of the metrics collectively, and monitor and debug your assessments. You possibly can be taught extra about Foresight from its documentation.
Summing up
That’s it! We created this mission with the hope of serving to the developer neighborhood by showcasing how simply and cost-free you may create a production-ready net utility.

 








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


Learn extra from Burak Kantarci

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Objective of this Venture

Anticipated Outcomes

Establishing the To-Do App with Subsequent.js

Establishing Assessments with Playwright

Creating the E2E take a look at

Making a JUnit Report

GitHub Actions Configuration

Establishing Foresight for Monitoring

Summing up

You may also like