Cypress - Premature evaluation of assertion due to potential error in promise chaining

Question

Cypress - Premature evaluation of assertion due to potential error in promise chaining

I am currently working on a Cypress/TypeScript test case that involves editing the selected value of a dropdown.

While chaining promises and utilizing Page Objects, I have encountered two main issues:

The assertion meant to be evaluated at the end is executed prematurely.
This premature execution leads to a failed assertion, yet the test still passes inexplicably.

screenshot: cl.ly/e4cb6837377c

spec

    it.only('C180: Change Tracking type: Important tasks => Time measurement', function () {
        const timeMeasurement = 'Time measurement'
        billing.currentTrackingType().then((trackingType) => {
            if(trackingType == timeMeasurement)
                this.skip()
            billing.changeTrackingType(1).then(() => {
                billing.currentTrackingType().then(($trackingType) => {
                    expect($trackingType).to.contain(timeMeasurement)
                })
            })
        })
    })

Page object:

    currentTrackingType() {
        return new Promise((resolve, reject) => {
            const timer = Cypress.$(this.elements.timer)
            resolve(timer.length? 'Time measurement':'Important tasks')
        })
    }

    changeTrackingType(index: any){
        const settingsChanged = 'Timesheet settings has been changed'
        return new Promise((resolve, reject) => {
            cy.get(this.elements.trackingType).select(index.toString())
            cy.get(this.elements.save).eq(3).click()
                resolve()
        })
    }
}

typescript cypress

Answer 1

Answer №1

When using Cypress, remember that commands run asynchronously, queued and executed in order.

For example:

        return new Promise((resolve, reject) => {
            cy.get(this.elements.trackingType).select(index.toString())
            cy.get(this.elements.save).eq(3).click()
                resolve()
        })

In this case, the promise will resolve right away as

cy.get().select().get().eq().click()

is enqueued synchronously followed by an immediate call to resolve().

If you insist on using the Promise pattern, consider structuring it like so:

        return new Promise((resolve, reject) => {
            cy.get(this.elements.trackingType).select(index.toString())
            cy.get(this.elements.save).eq(3).click()
            .then(resolve)
        })

resolve will be triggered once the click operation completes.

I would suggest revising your code to align with how Cypress operates rather than attempting to "promisify" it.

Test:

    it.only('C180: Change Tracking type: Important tasks => Time measurement', function () {
        const timeMeasurement = 'Time measurement'
        const trackingType = billing.currentTrackingType()
        if(trackingType == timeMeasurement)
            this.skip()
        billing.changeTrackingType(1)
        const newTrackingType = billing.currentTrackingType()
        expect(newTrackingType).to.contain(timeMeasurement)
    })

"Page object":

    currentTrackingType() {
        // Note that this may not work as expected - consider using
        // cy.get(this.elements.timer).then($el => { ... }) instead
        const timer = Cypress.$(this.elements.timer)
        return timer.length ? 'Time measurement':'Important tasks'
    }

    changeTrackingType(index: any){
        const settingsChanged = 'Timesheet settings has been changed'
        cy.get(this.elements.trackingType).select(index.toString())
        cy.get(this.elements.save).eq(3).click()
    }

Answer 2

When using Cypress, remember that commands run asynchronously, queued and executed in order.

For example:

        return new Promise((resolve, reject) => {
            cy.get(this.elements.trackingType).select(index.toString())
            cy.get(this.elements.save).eq(3).click()
                resolve()
        })

In this case, the promise will resolve right away as

cy.get().select().get().eq().click()

is enqueued synchronously followed by an immediate call to resolve().

If you insist on using the Promise pattern, consider structuring it like so:

        return new Promise((resolve, reject) => {
            cy.get(this.elements.trackingType).select(index.toString())
            cy.get(this.elements.save).eq(3).click()
            .then(resolve)
        })

resolve will be triggered once the click operation completes.

I would suggest revising your code to align with how Cypress operates rather than attempting to "promisify" it.

Test:

    it.only('C180: Change Tracking type: Important tasks => Time measurement', function () {
        const timeMeasurement = 'Time measurement'
        const trackingType = billing.currentTrackingType()
        if(trackingType == timeMeasurement)
            this.skip()
        billing.changeTrackingType(1)
        const newTrackingType = billing.currentTrackingType()
        expect(newTrackingType).to.contain(timeMeasurement)
    })

"Page object":

    currentTrackingType() {
        // Note that this may not work as expected - consider using
        // cy.get(this.elements.timer).then($el => { ... }) instead
        const timer = Cypress.$(this.elements.timer)
        return timer.length ? 'Time measurement':'Important tasks'
    }

    changeTrackingType(index: any){
        const settingsChanged = 'Timesheet settings has been changed'
        cy.get(this.elements.trackingType).select(index.toString())
        cy.get(this.elements.save).eq(3).click()
    }

Cypress - Premature evaluation of assertion due to potential error in promise chaining

Answer №1

Similar questions

An angular component that is functioning properly when connected to a live server, however, it is experiencing issues when trying to run `

Tips for organizing an NPM package containing essential tools

What is the reason for a type narrowing check on a class property failing when it is assigned to an aliased variable?

Exporting External JavaScript Variables in Angular 2 Using Typescript

Setting up Serverless Lambda for a Graphql API with Typescript: Step-by-step guide

Execution issue with Typescript function

Error encountered in Typescript parsing when setting EXTEND_ESLINT to true in create-react-app

Create a new project using Firebase Functions along with a Node.js backend and a React.js frontend

Is there a way to verify if a user taps outside a component in react-native?

Is it a common issue that sound.stop() doesn't seem to function properly, while sound.play() operates successfully within Howler

What is the best way to ensure that all components can access and utilize the same instance of API

Setting up VSCode to run various tasks

Determine if an object contains a specific key in Typescript and access the value associated with that

How can I set up unique values for a variable or constant in Angular 2 based on different environments?

When using TypeScript with Jest or Mocha, an issue arises where the testing frameworks are unable to read JavaScript dependencies properly, resulting in an error message saying "unexpected token

Creating a custom NPM package that combines a unique React Hook with a powerful React Component

Problem with uploading a zip file in Angular 2

Showing canvas lines while dragging (using only plain JavaScript, with React.JS if needed)

Creating a task management application using Vue 3 Composition API and Typescript with reactivity

Is there a way to reset static data in a TypeScript subclass? (or alternative method for managing global data)