Cypress "TypeError: Cannot set properties of null (setting 'onclick')"

Question

I'm working with cypress version 12 doing a simple test that I grab a tab and click on it. I'm getting the same error over and over again. My first thought was that this happens because the element is not fully loaded yet so I have to wait for the page to load completely. But even though I have tried a timeout or a wait for the cy.get() the error is still there.

Any hints?

HomePage.js

export default class HomePage {
    static open() {
        cy.visit('https://phptravels.net/');
    }

    static productsSearchBar() {
        return cy.get('button[data-bs-target="#tab-flights"]', {
            timeout: 50000,
        });
    }
}

test.cy.js

import HomePage from '../page-objects/pages/HomePage';

describe('Regression Test', () => {
    beforeEach(() => {
        // Before each test, visit the homepage and wait for the page to load
        HomePage.open();
    });

    it('should search for a product', () => {
        HomePage.flightButton();
    });
});

This is the element I'm trying to catch with the attribute that I selected for that:

The error I'm getting:

The error message share a a great deal of information. The error is in an uncaught exception thrown by your application code. If you want the test to avoid failing for this then this answer should help. stackoverflow.com/a/74644380/17917809 — jjhelguero
– jjhelguero, Commented Aug 3, 2023 at 18:55

score 0 · Accepted Answer · 2023-08-03 22:28:35Z

If you open up the dev-tools, go to console you will see the error message reproduced there.

The message contains a link to the spot that causes the error. If you click the link, the dev-tools will switch to the elements pane and show you the script that is failing:

    window.onload = function() {

        /* oneway */
        document.getElementById("one-way").onclick = function() {
            document.getElementById("show").className = "col hide";
            document.getElementById("onereturn").className = "row g-2 contact-form-action";
            document.getElementById("multiway").className = "";
            document.getElementById("departure").className = "depart form-control";
        }

        /* return */
        document.getElementById("round-trip").onclick = function() {
            document.getElementById("show").className = "col show_";
            document.getElementById("onereturn").className = "row g-2 contact-form-action";
            document.getElementById("multiway").className = "";
            document.getElementById("departure").className = "depart form-control dateleft border-top-r0";
        }

// the following line causes the error in the test

        /* multiway */
        document.getElementById("multi-trip").onclick = function() {
            document.getElementById("multiway").className = "multi-flight-wrap show_ mt-2";
            document.getElementById("show").className = "col hide";
            document.getElementById("departure").className = "depart form-control";
        }

    };
    </script>

If you then press ctrl-f to search for the id multi-trip there is only one reference to that string, and it occurs in the above script, which means there is no such element.

Compare to searching for round-trip, it will find the element with that id.

        <div class="col-md-4 flight_types m-0">
            <div class="row">
                <div class="d-flex gap-4 m-1">
                    <div class="form-check d-flex align-items-center gap-2 p-0">
                        <input class="form-check-input m-0" type="radio" name="trip" id="one-way" onclick="oneway();"
                            value="oneway"
                            checked>
                        <label class="form-check-label" for="one-way">
                            <!--<i class="icon mdi mdi-arrow-missed"></i>--> One Way                        </label>
                    </div>

                    <div class="form-check d-flex align-items-center gap-2 p-0">
                        <input class="form-check-input m-0" type="radio" name="trip" id="round-trip" value="return"
                            >
                        <label class="form-check-label" for="round-trip">
                            <!--<i class="icon mdi mdi-import-export"></i>--> Round Trip                        </label>
                    </div>

                    
                </div>
            </div>
        </div>

It seems logical that multi-trip option would be next to round-trip option in the above block, but maybe it is a feature that's not yet implemented.

If so, you can ignore the error by using this at the top of the test:

cy.once('uncaught:exception', () => false )

or if it's a regression that you need to catch, add this after the cy.visit() call

cy.get('#multi-trip').should('be.visible')

Collectives™ on Stack Overflow

Cypress "TypeError: Cannot set properties of null (setting 'onclick')"

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related