End-to-end(E2E) Testing for Vue.js application using Testcafe

If you are searching or looking for how to perform end-to-end (E2E) testing for your vue.js application then you are landed on the right spot!

Bear with me, at the end of this tutorial you’ll learn how to perform E2E for Vue.js. For this tutorial, I will be using one of the known library call Testcafe.

If you haven’t heard about Testcafe before, don’t worry I will walk you through as we go! or you can check it out here.

First of all, we need a Vue app, I have created a sample app for demonstration purpose.

Clone this repository:

git clone https://github.com/Tech-49/E2E-Testcafe-Vue.git
cd E2E-Testcafe-Vue

After cloning run following commands:

1. npm install To install the dependencies
2. npm run serveTo start the development server

Your app should be running at port 8080 by default. Head over to the browser and check this — http://localhost:8080

You should be able to see these pages running:

List of static users on the Home page.

About Us Page with dummy content!

Contact Us Page

ToDos Page

Now as a human If I want to test these pages then what I will do is, I will go page by page and make sure everything is working fine.

So let’s consider the following acceptance criteria for our app testing!

1. Go to the home page and make sure that the list of users are there & “view” button should be functional & accessible
2. Check “About us” and make sure it has “About us” heading on a page
3. Check “Contact us” page and make sure it has “Contact us” heading on a page
4. Check Add/Edit/Delete functionality is working on ToDo app page

Now I have already written test scripts for our acceptance criteria, so let’s run that and I will explain it in a while!

Open a new terminal (keep your Vue app running in another terminal) and run following command:

npm run test

This will launch the new chrome browser and start testing our app — just wait and let it finished.

Once this will be finished you should be able to see the following output in your terminal:

I had written four tests and it has passed successfully!

Now let’s understand how it has been written — open up package.json file in there I have added following line of code under scrips section.

"test": "testcafe chrome test/cases/*.test.js -S -s screenshots"

So when we run npm run test from the terminal/command line, this command will be executed.

Let’s understand these parameters!

testcafe — is a library which we are using here to perform the E2E test

chrome — here we have to define the name of the browser on which we want to perform the test. It could be firefox,safari etc. Click here to see more browser support.

test/cases/*.test.js — I have written all the tests in a new test directory, so here we have to define the path of it and *.test.js means I want to run my all .test.js files

-S -s screenshots means when a test has failed it will take a screenshot and save it under the screenshot folder.

Finally, let’s understand the test scripts!

test/cases/ is the directory where we put our all test scripts. Now open aboutUs.test.js file, you should see the following code:

import selectors from '../model/selectors.js';
fixture(`About us Page`)
   .page('http://localhost:8080');

test('Check heading is exist on about us page! ', async tc => {
   await tc
   .click(selectors.aboutMenu)
   .expect(selectors.heading.innerText).eql("About Us")
});

Now, let’s understand this code! ignore the first line for now.

Fixture means container here you can name this test script — what exactly this script is for!

Then we have a test function, we can have multiple test function written under single fixture.

When we run npm run test these test functions will be executed.

First, it will start the browser and open this page http://localhost:8080 then we are clicking on About Us menu and then make sure we have a heading text About Us. If the system able to find this we should see green check under the console window.

import selectors from '../model/selectors.js';

I have created all the selectors in a different file so we can import and re-use them.

Same as aboutUs.test.js other test files have been written, Check it out and let me know in the comment section below if you have any confusion.

That’s pretty much it! I hope you have found some value from this tutorial.

Thanks for reading!