Assertion in TestCafe

Assert is used to verify the state results with expected or actual results. In testcafe automation, Assertion is the state where we actually verify the test scenario’s results.  There are many ways to use assertion. in this Testcafe tutorial, let’s see some assertion examples in testcafe.

Assert in TestCafe

t.expect()  function is used to perform assertion in testcafe. it will return true or false values as per the inputs. There are many ways to use

t.exptect in testcafe that depends on the assertions requirement. below are some common or most used ways to perform assertions for your automation script.

t.expect(5).gt(2) //Will return true

Testcafe Assert to verify exact match(equal) value

t.expect.eql function in testcafe is used to verify actual and expected results. It will allow comparing any kind of value. Like it can be a number or String.

In the below testcafe example, the Scenario is

  • Navigate to URL(“https://devexpress.github.io/testcafe/example/”)
  • Read the headline of the page.
  • Verify page heading as “Example” to compare String.
  • Verify 5 is equal to 5 to compare Numbers.
import { Selector } from 'testcafe';

fixture `Testcafe Automation tutorial`
    .page `https://devexpress.github.io/testcafe/example/`

test('Testcafe Example for t.expect.eql', async t => {
    const PageHeadingEle = Selector('h1');
    var pageHeading = await PageHeadingEle.innerText
    console.log("Actual Page Heading: "+pageHeading)
    await t .expect(pageHeading).eql('Example')
    await t .expect(5).eql(5)
    .wait(5000)
});

Testcafe Assert to verify not equal value

t.expect.notEql function in testcafe is used to verify actual and expected results. It will allow comparing any kind of value. It will return true if values are not equal and false if values are equal let’s understand it by another testcafe example.

In the below testcafe example, the Scenario is

  • Navigate to URL(“https://devexpress.github.io/testcafe/example/”)
  • Read the headline of the page.
  • Verify page heading “Example” should not be equal to “Example123” to compare String.
  • Verify 5 is not equal to 6 to compare Numbers.
import { Selector } from 'testcafe';

fixture `Testcafe Automation tutorial`
    .page `https://devexpress.github.io/testcafe/example/`

test('Testcafe Example for t.expect.eql', async t => {
    const PageHeadingEle = Selector('h1');
    var pageHeading = await PageHeadingEle.innerText
    console.log("Actual Page Heading: "+pageHeading)
    await t .expect(pageHeading).notEql('Example123')
    await t .expect(5).notEql(6)
    .wait(5000)
});

Verify string contains, sub-string in Testcafe

t.expect.containsfunction in testcafe is used to verify string contains a substring or not. It will return true if a string contains a substring and false if values do not contain any sub-string let’s understand it by another testcafe example.

In the below testcafe example, the Scenario is

  • Navigate to URL(“https://devexpress.github.io/testcafe/example/”)
  • Read the subheadline of the page.
  • Verify page subheading “This webpage is used as a sample in TestCafe tutorials.” contains “webpage” as a substring.
import { Selector } from 'testcafe';

fixture `Testcafe Automation tutorial`
    .page `https://devexpress.github.io/testcafe/example/`

test('Testcafe Example for t.expect.contains', async t => {
    const PageSubHeadingEle = Selector('p').withText('This webpage is used as a sample in TestCafe tutorials.')
    var pageHeading = await PageSubHeadingEle.innerText
    console.log("Actual Page Heading: "+pageHeading)
    await t .expect(pageHeading).contains('webpage')
    
    .wait(5000)
});

Verify string does not contain, sub-string in Testcafe

t.expect.notContainsfunction in testcafe is used to verify string contains do not contains a substring. It will return true if a string does not contain a substring and false if values contain any sub-string let’s understand it by another testcafe example.

In the below testcafe example, the Scenario is

  • Navigate to URL(“https://devexpress.github.io/testcafe/example/”)
  • Read the subheadline of the page.
  • Verify page subheadings “This webpage is used as a sample in TestCafe tutorials.” do not contains “Hello Learner” as a substring.
import { Selector } from 'testcafe';

fixture `Testcafe Automation tutorial`
    .page `https://devexpress.github.io/testcafe/example/`

test('Testcafe Example for t.expect.notContains', async t => {
    const PageSubHeadingEle = Selector('p').withText('This webpage is used as a sample in TestCafe tutorials.')
    var pageHeading = await PageSubHeadingEle.innerText
    console.log("Actual Page Heading: "+pageHeading)
    await t .expect(pageHeading).notContains('Hello Learner!')
    
    .wait(5000)
});

Testcafe asserts to verify less than, and greater than values

Yes, We can compare two numbers in testcafe. there are some prebuild assert functions in text cafe like t.expect.gt t.expect.lt
Let’s see some more Testcafe Assertion examples.

Testcafe Assert to verify less than the value

t.expect.lt function is used to verify less than value. in the below TestCafe example Verify, 2 is less than 4.

await t .expect(2).lt(4)

Testcafe Assert to verify less or equal than the value

t.expect.lte function is used to verify less than or equal value. in the below TestCafe example Verify, 2 is less than or equal to 2.

await t .expect(2).lte(2)

Testcafe Assert to verify greater than the value

t.expect.gt function is used to verify greater than value. in the below TestCafe example Verify, 4 is greater than to 2.

await t .expect(4).gt(2)

Testcafe Assert to verify greater or equal than the value

t.expect.gte function is used to verify greater than or equal value. in the below TestCafe example Verify, 2 is greater than or equal to 2.

await t .expect(2).gte(2)

Testcafe Assert to verify less than and greater than

import { Selector } from 'testcafe';

fixture `Testcafe Automation tutorial`
    .page `https://devexpress.github.io/testcafe/example/`

test('Testcafe asserts to verify less than, equal, and greater than values', async t => {
     //Is 4 is less than 2
    await t .expect(2).lt(4)
    //Is 2 is less than or equal to 2
    await t .expect(2).lte(2)

      //Is 2 is greater than 4
      await t .expect(4).gt(2)
      //Is 2 is greater than or equal to 2
      await t .expect(2).gte(2)
    
    .wait(5000)
});

Testcafe assert to verify matched regex

t.expect.matchfunction is used to verify regex expression in testcafe. In the below, Example will match ‘c’ into “codedec”.

import { Selector } from 'testcafe';

fixture `Testcafe Automation tutorial`
    .page `https://devexpress.github.io/testcafe/example/`

test('Testcafe asserts to verify match regex', async t => {
 
    await t .expect('codedec').match(/^c/)
    .wait(5000)
});

Testcafe asserts to verify not matched regular expression

t.expect.notMatchfunction is used to verify not matched regex expression in testcafe. In the below, Example will match ‘N’ into “codedec”.

import { Selector } from 'testcafe';

fixture `Testcafe Automation tutorial`
    .page `https://devexpress.github.io/testcafe/example/`

test('Testcafe asserts to verify match regex', async t => {
 
    await t .expect('codedec').notMatch(/^N/)
    .wait(5000)
});

Verify Element is exist or not in Testcafe

t.expect.Ok and t.expect.notOk in Testcafe

t.expect.Ok and t.expect.notOk in testcafe is used to verify the conditions like some element exist or not let’s understand it by another testcafe assert example.

Verify element “h1” exists on the page.

import { Selector } from 'testcafe';

fixture `Testcafe Automation tutorial`
    .page `https://devexpress.github.io/testcafe/example/`

test('Testcafe asserts to verify match regex', async t => {
     const HeadingEle = Selector('h1')
    await t .expect(HeadingEle.exists).ok()
    .wait(5000)
});

Verify element with id  “#codedec” does not exist on the page.

import { Selector } from 'testcafe';

fixture `Testcafe Automation tutorial`
    .page `https://devexpress.github.io/testcafe/example/`

test('Testcafe asserts to verify match regex', async t => {
     const HeadingEle = Selector('#codedec')
    await t .expect(HeadingEle.exists).notOk()
    .wait(5000)
});

t.expect.within and t.expect.notWithin  TestCafe

t.expect.within and t.expect.notWithinin testcafe is used to verify values between ranges. let’s understand by an example. Verify an element on the page that is available between page scrolls (300, 500).

import { Selector } from 'testcafe';

fixture `Testcafe Automation tutorial`
    .page `https://devexpress.github.io/testcafe/example/`

test('Testcafe asserts to verify with in range', async t => {
     //With in example
    await t.expect(4).within(3,6)

    //Not With in example
    await t.expect(2).notWithin(8,12)
    .wait(5000)
});

Verify Element is visible or not in Testcafe

t.expect.visible.okfunction in testcafe is used to verify the element is available or not on the page. If the element is visible then it will return true otherwise it will return false.

import { Selector } from 'testcafe';

fixture `Testcafe Automation tutorial`
    .page `https://devexpress.github.io/testcafe/example/`

test('Testcafe asserts to verify with in range', async t => {
    const HeadingEle = Selector('h1')

     //Is element display 
    await t.expect(HeadingEle.visible).ok

});