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:

Answer 1

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')