{"id":14824,"date":"2021-10-20T06:51:44","date_gmt":"2021-10-20T10:51:44","guid":{"rendered":"https:\/\/qxf2.com\/blog\/?p=14824"},"modified":"2021-10-20T06:51:44","modified_gmt":"2021-10-20T10:51:44","slug":"end-to-end-ui-automation-using-testcafe","status":"publish","type":"post","link":"https:\/\/qxf2.com\/blog\/end-to-end-ui-automation-using-testcafe\/","title":{"rendered":"End to End UI Automation using TestCafe"},"content":{"rendered":"

For one of our clients, TestCafe<\/a> has been recently used for end-to-end(e2e) UI automation. TestCafe<\/a> has a number of significant features, including simple setup, no web driver installation, support for all main operating systems, various browser support, reporting and HTTP Mocking.<\/p>\n

In this article, I’d like to show how to create UI tests with TestCafe, as well as how to set up and write e2e tests with basic assertions using page object models. For this, we created a sample React Resume Builder Application, which we will use to write an e2e test in the sections that follow. If you are new to TestCafe, this article will help you understand the basic features of TestCafe as well as how to write selectors for a React application.<\/p>\n

TestCafe Setup and Requirements<\/h3>\n

Pre-requisite<\/strong>: Install NodeJS<\/a> and npm<\/a> and check if the installation is correct by node -v<\/code> and npm -v<\/code><\/p>\n

TestCafe<\/a> can be installed globally or locally in your project using npm.
\nFor Global Installation on windows – npm install-g testing cafe<\/code>
\nFor Local Installation on windows – npm install --save-dev testcafe<\/code><\/p>\n

Check the installation by running the command testcafe -v<\/code>
\nThe output looks like this: <\/p>\n

$ testcafe -v
\nUsing locally installed version of TestCafe.
\n1.15.1<\/code><\/p>\n

Note<\/strong>: If TestCafe is installed both locally and globally, the TestCafe command will run the local version.<\/p>\n

About our Web Application and Setup<\/h3>\n

For this tutorial, I am using this sample Resume Builder Application<\/a> created using create-react-app<\/a>. This application is built for our internal training purpose. You can find the source code here<\/a>. This react application is used to create a resume by entering personal, educational, and professional experience details. Begin by cloning the base project structure<\/p>\n

$ git clone https:\/\/github.com\/yashrajb\/Drail-Resume-Builder.git<\/code><\/p>\n

From the root directory run npm start<\/code> to start the project. The application will be deployed at http:\/\/localhost:3000 and a list of UI fields should appear. Once you’re comfortable with the application, start writing tests. <\/p>\n

Before we get started, take a look at our sample Resume Builder application. It consists of two pages, main page with textboxes, drop down list, buttons etc., and a redirect page. In this tutorial, I am going to build a E2E tests for Resume builder application. For example, this test will go to the main web page, fill out the form, and verify if the filled in contents are displayed in the redirected page.<\/p>\n

\"\"<\/a>
Main Page<\/figcaption><\/figure>
\n
\"\"<\/a>
Education and Experience fields in Main Page<\/figcaption><\/figure><\/p>\n

Page Object Architecture<\/h3>\n

Using the Page Objects Pattern is one of the best pattern for architecting a testing project. Ideally, you should save all selectors or locators or any specific data that is unique to a specific page in a page object file. The main advantage of this pattern is that it will be easier to maintain the test because if some changes are required, the test itself will remain unchanged, and only the selectors or locators in one page will need to be modified. This pattern helps to make the code more understandable, maintainable, and reusable by writing the page methods. You can read here about page objects<\/a>. <\/p>\n

Writing Page Objects<\/h3>\n

For this testing, I used the page object model and created classes for each web page in the application. The Test scenarios include <\/p>\n

  • filling out the basic information, educations details and experience details on the main page and\n<\/li>\n
  • \nasserting the data in the redirect page.<\/li>\n

    In the project root folder, I created a folder called `\/pages` and a folder called `\/tests`, and started writing page objects and tests here. Lets start with a basic assertion<\/a>. The directory structure looks like this:<\/p>\n

    \"\"<\/a>
    Project Directory Structure<\/figcaption><\/figure>\n

    Create Main page model<\/h3>\n

    Make a file called “mainPage.js” in the pages folder, then declare a Page Object Class as shown below. This page consists of all the element locators and methods that we will use in the main page. To begin, you must import the Selector API<\/a> from testcafe module. The TestCafe Selector function allows to use CSS selectors to locate the elements to test.<\/p>\n

    \r\nimport { Selector, t } from 'testcafe';\r\nconst { ReactSelector } = require('testcafe-react-selectors');\r\n\r\nexport default class mainPage {\r\n    constructor() {   \r\n         this.title = Selector('a');     \r\n    }\r\n<\/pre>\n
    In the mainPage.js, I have simply added one Selector which will be accessed from the test.<\/p>\n
    Creating our first Test<\/h3>\n
    Test scripts should be organized by module name under the “tests” folder. Each test is grouped into a fixture<\/a> in TestCafe. The fixture is essentially a test category, and each test might have multiple fixtures. TestCafe uses a proxy server to inject scripts to the page, which we can then inspect. <\/p>\n
    I created a ‘\/E2ETest.js’ file in the `\/tests` folder and this test starts by opening the application and checking the header of the page(we will extend this test further in our next sections). If you notice I have also defined a config file to store all the critical data required for the project. In automated testing, test data is usually a crucial component. Using hardcoded values in our tests, such as ‘url’, is not a good idea. So I have added these values to a config file and am reading from it.<\/p>\n
    Our first test looks something like this.<\/p>\n
    \r\nimport mainPage from '..\/pages\/mainPage';\r\nimport config from '..\/config\/config'\r\n\r\nfixture`E2E Fixture - Building a resume`\r\n      .page`${config.testURL}`;\r\n\r\n\/\/ page header test\r\ntest('Assert main page header', async t => {\r\n      \/\/ The assertion      \r\n      await t.expect(await mainPage.title.innerText).eql(\"Drail Resume Builder\");\r\n});<\/pre>\n
    After importing the required modules, declare a test fixture and name it as `fixture ‘E2E Fixture – Building a resume’.` and define the start URL for all the tests in the fixture. In our situation, the URL is http:\/\/localhost:3000. Use keyword test<\/a> to create a new test(). In our case, the test starts with asserting the URL of the home page header. <\/p>\n
    Run the tests<\/h3>\n
    There are many ways to run a test in TestCafe. The simplest way is run using<\/p>\n
    testcafe chrome .\/tests\/E2ETest.js<\/code><\/p>\n
    \"\"<\/a>
    Run Test<\/figcaption><\/figure>\n
    Add actions to the page models<\/h3>\n
    Let’s now add some actions to the page object mainPage.js. Inside the page object functions, things alter a bit. This time we’re instructing TestCafe to select specific form elements and type using the typeText(). So our mainPage.js now becomes<\/p>\n
    mainPage.js<\/strong><\/em><\/p>\n
    \r\nimport { Selector, t } from 'testcafe';\r\nconst { ReactSelector } = require('testcafe-react-selectors');\r\n\r\nclass mainPage {\r\n    constructor() {\r\n        this.title = Selector('a');\r\n        this.resume = ReactSelector('LinkAnchor')\r\n        this.name = Selector('input[id=name]')\r\n        this.email = Selector('input[id=email]')\r\n        this.phone = Selector('input[id=phone]')\r\n        this.headline = Selector('input[id=headline]')\r\n        this.objective = Selector('textarea[id=objective]')\r\n        this.skills = Selector('input[id=skills]')\r\n        this.languages = Selector('input[id=lang]')\r\n        this.college = ReactSelector('EducationForm').findReact('Input').withProps('id', 'college')\r\n        this.degree = ReactSelector('EducationForm').findReact('Input').withProps('id', 'degree')\r\n        this.fromDateEdu = ReactSelector('EducationForm').findReact('Input').withProps('id', 'from')\r\n        this.toDateEdu = ReactSelector('EducationForm').findReact('Input').withProps('id', 'to')\r\n        this.educationSubmit = ReactSelector('EducationForm').findReact('Button').withProps('children', 'Submit')\r\n        this.redirect = Selector('h3')\r\n        this.position = ReactSelector('ExperienceForm').findReact('Input').withProps('id', 'position')\r\n        this.company = ReactSelector('ExperienceForm').findReact('Input').withProps('id', 'company')\r\n        this.fromDateExp = ReactSelector('ExperienceForm').findReact('Input').withProps('id', 'from')\r\n        this.toDateExp = ReactSelector('ExperienceForm').findReact('Input').withProps('id', 'to')\r\n        this.responsibility = ReactSelector('ExperienceForm').findReact('Input').withProps('id', 'responsible')\r\n        this.experienceSubmit = ReactSelector('ExperienceForm').findReact('Button').withProps('children', 'Submit')\r\n    }\r\n\r\n    \/\/ click the resume button for the given link\r\n    async clickResumeButton(link) {\r\n        await t.click(this.resume.withProps('children', link))\r\n    };\r\n\r\n    \/\/ fills basic details\r\n    async fillBasicDetails(name, email, phone, headline, obj, skills, lang) {\r\n        await t\r\n            .typeText(await this.name, name)\r\n            .typeText(await this.email, email)\r\n            .typeText(await this.phone, phone)\r\n            .typeText(await this.headline, headline)\r\n            .typeText(await this.objective, obj)\r\n            .typeText(await this.skills, skills)\r\n            .typeText(await this.languages, lang)\r\n    }\r\n\r\n    \/\/ fill the education details in the page\r\n    async fillEducationDetails(educationDetails) {\r\n        await t\r\n            .typeText(await this.college, educationDetails.college)\r\n            .typeText(await this.degree, educationDetails.degree)\r\n            .typeText(await this.fromDateEdu, educationDetails.fromDateEdu)\r\n            .typeText(await this.toDateEdu, educationDetails.toDateEdu)\r\n            .click(await this.educationSubmit)\r\n    }\r\n\r\n    \/\/ fills the experience details \r\n    async fillExperienceDetails(experienceDetails) {\r\n        await t\r\n            .typeText(await this.position, experienceDetails.position)\r\n            .typeText(await this.company, experienceDetails.company)\r\n            .typeText(await this.fromDateExp, experienceDetails.fromDateExp)\r\n            .typeText(await this.toDateExp, experienceDetails.toDateExp)\r\n            .typeText(await this.responsibility, experienceDetails.responsibility)\r\n            .click(await this.experienceSubmit)\r\n    }\r\n}\r\n\r\nexport default new mainPage();\r\n<\/pre>\n
    In the above page, I have added the following:<\/p>\n
  • Selector<\/a> and ReactSelectors<\/a> are used in the test in the mainPage class. TestCafe provides ReactSelectors<\/a> plugin which provides selector extensions which helps to navigate a component structure and select component by name and state. The ReactSelector function takes in a root component name. You can use findReact() method to select the subcomponent or the component’s children <\/li>\n
  • different page methods which will be used in our tests<\/li>\n
  • defined different page actions using Test API to fill up the Education and Experience fields. To do this, different API functions such as .typeText()<\/a>, .expect()<\/a>, and .click()<\/a> were used.<\/li>\n
    Similarly, the page methods for redirect page are to verify if the contents are displayed correctly.<\/p>\n
    redirectPage.js<\/strong><\/em><\/p>\n
    \r\nconst { ReactSelector } = require('testcafe-react-selectors');\r\n\r\nexport default class redirect {\r\n    constructor() {\r\n        this.resume = ReactSelector('Resume')\r\n        this.educationView = ReactSelector('EducationView')\r\n        this.experienceView = ReactSelector('ExperienceForm')\r\n    }\r\n\r\n    \/\/ resume with specific name\r\n    async checkName(name) {\r\n        return this.resume.withProps('name', name)\r\n    };\r\n\r\n    \/\/ check education details\r\n    async checkEducationDetails(educationDetails) {        \r\n        return this.educationView.withProps(educationDetails)\r\n    }\r\n\r\n    \/\/ check experience details\r\n    async checkExperienceDetails(Experiencedetails) {\r\n        return this.experienceView.withProps(Experiencedetails)\r\n    }\r\n\r\n};\r\n<\/pre>\n
    Complete E2E Test<\/h3>\n
    Now our test needs to be extended to make use of the methods in the page objects. By importing and accessing its selectors, I can now use this page model in the e2e test.<\/p>\n
    I have added different tests for filling in personal, education and experience details and asserting the contents. I first imported all the page object classes needed, such as mainPage.js, redirectPage.js, as well as the config and data files. If you notice, I have also created a data folder to store data-specific information. With this in place, we can access our selectors through the page model’s properties and our test becomes like this<\/p>\n
    \r\nimport mainPage from '..\/pages\/mainPage';\r\nimport redirectPage from '..\/pages\/redirectPage';\r\nconst data = require('..\/data\/mainPageData');\r\nimport config from '..\/config\/config'\r\n\r\nfixture`E2E Fixture - Building a resume`\r\n      .page`${config.testURL}`;\r\n\r\n\/\/ page header test\r\ntest('Assert main page header', async t => {         \r\n      await t.expect(await mainPage.title.innerText).eql(`${data.basicInfo.title}`);\r\n});\r\n\r\n\/\/ fill the education and experience details page\r\ntest('Fill the education and experience details', async t => {\r\n      await mainPage.fillBasicDetails(data.basicInfo.name, data.basicInfo.email, data.basicInfo.phone, data.basicInfo.headline, data.basicInfo.objective, data.basicInfo.skills, data.basicInfo.languages)    \r\n      await mainPage.fillEducationDetails(data.educationDetails)     \r\n      await mainPage.fillExperienceDetails(data.experienceDetails)\r\n      await mainPage.clickResumeButton('Resume')      \r\n      const name = await redirectPage.checkRedirectName(data.basicInfo.name);\r\n      await t.expect(name.exists).ok();     \r\n      \/\/ check that we have the correct education details\r\n      const educationDetails = await redirectPage.checkEducationDetails({\r\n            college: data.educationDetails.college,\r\n            degree: data.educationDetails.degree,\r\n            from: data.educationDetails.fromDateEdu,\r\n            to: data.educationDetails.toDateEdu\r\n      })           \r\n      await t.expect(educationDetails.exists).ok()\r\n      \/\/ check that we have the correct experience details\r\n      const experienceDetails = await redirectPage.checkExperienceDetails({\r\n            position: data.experienceDetails.position,\r\n            company: data.experienceDetails.company,\r\n            from: data.experienceDetails.fromDateExp,\r\n            to: data.experienceDetails.toDateExp,\r\n            responsible: data.experienceDetails.responsibility\r\n      })    \r\n      await t.expect(experienceDetails.exists).ok()\r\n});\r\n<\/pre>\n
    Now, run the test and view the Test Results. There are many ways to run a test in TestCafe. This time I have added the testcafe command to the scripts<\/a> section in package.json as shown below<\/p>\n
    \r\n\"scripts\": {\r\n    \"test-resume\": \"testcafe chrome .\/tests\/E2ETest.js\/\"\r\n}\r\n<\/pre>\n
    $ npm run test-resume<\/code><\/p>\n
    \"\"<\/a>
    Test Output<\/figcaption><\/figure>\n
    Running Tests using CLI commands<\/h3>\n
    TestCafe supports modern browsers and automatically detects the browsers installed on your machine. Listing out few CLI commands<\/p>\n
    1. Use below command to view the list of all available browsers<\/p>\n
    testcafe --list-browsers<\/code><\/p>\n
    2. Use below command to run this test on selected browsers<\/p>\n
    testcafe firefox, chrome, safari .\/tests\/E2ETest.js<\/code><\/p>\n
    In this case, testcafe will open three instances together in three different browsers.<\/p>\n
    3. Running on Google Chrome headless<\/p>\n
    testcafe \"chrome:headless\" .tests\/E2ETest.js<\/code><\/p>\n
    4. Parallel Test Execution against multiple browsers<\/p>\n
    testcafe -c 1 safari,chrome .\/tests\/E2ETest.js<\/code><\/p>\n
    5. Set Test Execution speed<\/p>\n
    testcafe chrome .\/tests\/E2ETest.js  --speed 0.5<\/code><\/p>\n
    Debugging the Tests<\/h3>\n
    There are different ways to debug the TestCafe Tests. One way is Debug mode<\/a>. Using this mode, test execution is paused before the action or assertion so that you can open the developer tools and debug the state of the element and page. The execution is halted and you can resume test execution or skip to the next action or assertion.<\/p>\n
    \"\"<\/a>
    Debug Mode<\/figcaption><\/figure>\n
    We can also enable Debug mode On Fail using CLI option, which will automatically enter into Debug mode when a test fails using below command<\/p>\n
    testcafe chrome .\/tests\/E2ETest.js --debug-on-fail<\/code><\/p>\n\n
    That’s all folks !! I have only touched the basics of what can be done with TestCafe, if you want more information on TestCafe you can visit official documentation<\/a> <\/p>\n\n
    References:<\/h3>\n
    1. TestCafe documentation<\/a>
    \n2.     End to End testing with TestCafe<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    For one of our clients, TestCafe has been recently used for end-to-end(e2e) UI automation. TestCafe has a number of significant features, including simple setup, no web driver installation, support for all main operating systems, various browser support, reporting and HTTP Mocking. In this article, I’d like to show how to create UI tests with TestCafe, as well as how to […]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[291,290,292],"tags":[],"class_list":["post-14824","post","type-post","status-publish","format-standard","hentry","category-nodejs","category-react","category-testcafe"],"_links":{"self":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/14824","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/comments?post=14824"}],"version-history":[{"count":91,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/14824\/revisions"}],"predecessor-version":[{"id":15565,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/14824\/revisions\/15565"}],"wp:attachment":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/media?parent=14824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/categories?post=14824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/tags?post=14824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}