testcafe-reporter-html is a Node library that is used to generate HTML reports to generate results in testcafe. testcafe-reporter-html provides a good interface to view the detailed error and also we can view the failed and pass testcases with screenshots and videos.

Let’s create an end-to-end testcafe automation example to generate an HTML report in testcafe.

Steps to Generate HTML report in testcafe

•  Install testcafe-reporter-html package.
  • Open your terminal and install the package npm install testcafe-reporter-html
• Update the test Runner script.
  • Enter –-reporter html   in the test runner testcafe chrome test_folder/ --reporter html
• Set output path(Folder and Filename).
  • Set path to save the files testcafe chrome test_folder/ --reporter html:path/filename.html

Note: For Test, Runner opens package.json and check the script.

"scripts": { "test": "echo \"Error: no test specified\" && exit 1" }

Generate HTML report in testcafe

Let’s create an example to write a test script and generate an HTML report in testcafe. in below example will write script to automate login page.

Test Scenario 1: Login with Valid UserName and Password

• Navigate to URL
• Enter Valid UserName
• Enter Valid Password
• Click to Login button
• Verify the user is successfully login into the application

Test Scenario 2: Login with InValid UserName and Password

• Navigate to URL
• Enter InValid UserName
• Enter InValid Password
• Click to Login button
• Verify the user is not successfully login into the application and verify the error message.

LoginPage.js

import { Selector, t } from 'testcafe';
import config from '../Utilities/config.json';

const user = config.users; 


export default class LoginPage {

     constructor(){

        
         this.LoginBtn = Selector('#signin_button')
         this.userName = Selector('#user_login');
         this.password = Selector('#user_password')
         this.singInBtn = Selector('.btn')
         this.AccountSummayLink = Selector('#account_summary_tab').child('a')
         this.LoginFailedError = Selector('.alert-error')
     }

     
    async LoginWithValidUser(){
        await t  
        .wait(2000)
        .click(this.LoginBtn)
        .typeText(this.userName, user.username)
        .click(this.password)
        .pressKey('ctrl+a delete')
        .typeText(this.password, user.password)
        .click(this.singInBtn, { timeout: 10000 })

    }

    async LoginWithInValidUser(){
        await t  
        .wait(2000)
        .click(this.LoginBtn)
        .typeText(this.userName, user.username+"dgdss")
        .click(this.password)
        .pressKey('ctrl+a delete')
        .typeText(this.password, user.password+"gfd")
        .click(this.singInBtn)
        .wait(3000)
    }
}

login.js

import { Selector } from 'testcafe';
import config from '../Utilities/config.json';
import LoginPage from '../Pages/LoginPage';


const loginPage = new LoginPage();


fixture `Login Page Auatomation`
    .page(config.url)
   

test('1) Login with Valid UserName and Password', async t => {
    
    await loginPage.LoginWithValidUser();
    await t    
       .wait(10000)   
       .expect(loginPage.AccountSummayLink.exists).ok();         
})
.meta('smoke', 'true').meta('platform', 'Web');

test.only('2) Login with invalid Username and Valid Password', async t => {
    await t

    await loginPage.LoginWithInValidUser();
    await t    
       .setTestSpeed(0.2)    
       .expect(loginPage.LoginFailedError.exists).ok();   
})
.meta('smoke', 'true').meta('regression', 'true').meta('platform', 'Web');

config.json

{

    "url":"http://zero.webappsecurity.com/index.html",
    "shortWait": 1000,
    "mediumWait": 5000,
    "timeout": 5000,
    "longWait": 10000,
    "users": {
        "username":"username",
        "password":"password"
}
}

package.json

{
  "name": "pomtutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "testcafe chrome TestCases/ --reporter html:Result/report1.html"
  },
  "author": "Codebun",
  "license": "ISC",
  "dependencies": {
    "testcafe": "^1.18.1",
    "testcafe-reporter-html": "^1.4.6"
  }
}

Run the Suite by using testcafe chrome TestCases