Electron-React Boilerplate: TestCafe E2E Testing of Navbar
Automated UI testing I find interesting and looks extremely beneficial but I am new to it. I wanted to share what I learn and how I setup the UI testing as I build the examples specific to the Electron-React Boilerplate v1.3.1 created for my GitHub example. The minimal testing I am setting up is in reference to my article, Creating a Simple Navbar .
Re-building the for E2E Testing with TestCafe
Before we can run testing with TestCafe, a build script is required for changes made in the app folder. Otherwise, the new information will not show in the e2e testing window.
For the boilerplate, the command for e2e build:
yarn build-e2eYou could update the package.json or GitHub workflow scripts to include the e2e build when updates are made instead of having to run a separate command.
Running The E2E Testing
To run the e2e (End To End testing):
yarn test-e2eThe script will open a Chrome window to test the windows basic UI (User Interface) functionality and display. This benefit allows quality testing of the application much more efficiently with pin pointed errors when updates are made.
But testing requires a different train of thought , especially as a Jr. developer. What to test, how to test it and did it get tested is what I keep asking myself but as I am learning it can get tricky. If the original program wasn’t setup in the right formatted or trying to test other library functions that shouldn’t be included in testing or even not setting up a test for a specific component or function or needing setting up asynchronous testing scan all can complicate things. This includes verifying that passing tests will fail! Like everything the more practice the better one will get.
Setup E2E Testing for Navbar
First we need to add a data-tid=”navbar” to the app/components/Navbar.tsx file.
We do this so TestCafe can grab the specific component elements for testing, like how a jQuery selector is used to grab a specific element.
We will only be looking at the file in test/e2e/HomePage.e2e.ts to add the setup for the navbar. The “Selector” is used to grab the navbar component and the buttons to use for testing. I added these below the counter setup under Navbar setup on HomePage.e2e.ts.
Navbar Testing
Since the Navbar doesn’t have any functions to test, I only need to setup testing in the test/e2e folder. The thing to test for in this example is:
There are three buttons with the name Home, Counter and Form Types
The Navbar still shows when navigating to all three pages
The specified button navigates to the correct page
Here is the testing Setup for the Navbar I added to the test/HomePage.e2e.ts file. I added the lines after the first test as reference.
Starting at the first test below “Navbar Testing Start” comment, I am checking that the navbar component exists, then verifying that there are three buttons/links elements inside it.
The second test verifies the button name “Counter” then checks that it navigates to the /counter page when clicked.
The third test verifies the Navbar is still there, then checks for button name “Form Types” then that it navigates to the /formtypes page when clicked.
The final test for the Navbar does the same as before only for “Home” and “/” as the navigation page.
Then run
yarn test-e2eand the window will load.
As it is testing you will see a courser moving to the specified buttons or links in the same order as the testing. If you want, you can verify that tests will fail if you change the different string values and may give a newbie like me more insight into how the testing works.
Conclusion
This is the most simple testing that can be done for strictly UI testing. I have shown how to select specific components to test for and how to use the selection to pull some of the information to test against. There is much more we can do and remember to use the documentation at TestCafe as I will when expanding on my documentation of the Electron-React Boilerplate.
