problem accessing elements using id/name for login form in cypress

Question

I am trying to login to a form written in angular js but cypress throws the following exception:

    Uncaught TypeError: $(...).materialScrollTop is not a function

This error originated from your application code, not from Cypress.

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the 'uncaught:exception' event.

https://on.cypress.io/uncaught-exception-from-application

This is the cypress login code:

context('TestLogin', () => {

    it('Test Login', () => {

        cy.visit('url');
       cy.get('input[id=Email]').type('email', {force: true});
       cy.get('input[id=Password]').type('passcode', { force: true });
       cy.get('button[type=submit]').click();
    })
})

Since the login has a csrf token, I have used cy.request() as follows and I do get a response with status code 200 but when re-loading the site it goes back to login page.

describe("Tests for AntiForgeryToken", function () {
  // variable from config, that contain Identity Server URL
  const identityUrl = Cypress.config("identityServerUrl")

  // command declaration that we are going to use in tests
  // allows us to create request to server
  Cypress.Commands.add("loginByToken", function (token, login, password) {
    cy.request({
      method: "POST",
      failOnStatusCode: false,
      url: `${identityUrl}/Account/Login`,
      form: true,
      body: {
        email: login,
        password: password,
        __RequestVerificationToken: token,
        RememberLogin: false
      }
    })
  })

  it("Should parse token from response body and return 200", function () {
    cy.request(`${identityUrl}/Account/Login`)
      .its("body")
      .then((body) => {
        const $html = Cypress.$(body)
        // when the page is rendered
        // we are trying to find the Request Token in the body of page
        const token = $html.find("input[name=__RequestVerificationToken]").val()

        // POST request with token and login data
        // then we simply verify whether Indentity Server authorized us
        cy.loginByToken(token, "[email protected]", "Test_1234")
          .then((resp) => {
            expect(resp.status).to.eq(200)
          })
      })
      cy.visit(`${identityUrl}/Account/`);
  })

Cypress documentation didn't provide much info about the exception.

Any insights from cypress experts are helpful.

Answer 1

As evident from the error, Cypress is failing the test as it found an exception in your application,this is not a cypress level exception but an uncaught exception in your app which is causing cypress to fail the test, this is pretty useful as you can check if its an actual error in your app and log it for the dev team to fix, check if you are able to reproduce this manually, either way i think the application code should be fixed to either fix the bug or catch the exception and return a valuable error message. If you want to disable this feature you can turn off all uncaught exception handling, so in your index.js or whatever file is the entry point add the following:

Cypress.on('uncaught:exception', (err, runnable) => {
// returning false here prevents Cypress from
  // failing the test
  // you can also add a Debugger here to analyze the error
    debugger;
    return false;
});

not sure if turning this off will help as looks like there is something in your application which could be an issue, but this is just for informational purposes that you can turn this feature off if you needed to.

Here is the documentation for further reading : Cypress Events documentation

hope this helps