Online application login page testing with Cypress (cannot find the element)

Question

I plan to automate the testing procedure for SAP Hybris with Cypress. However, I got stuck on the first step, which is the login.

Here is the page I am talking about:
https://backoffice.iqos.com/backoffice/login.zul

So basically, these are the steps I would need help with:

1. Enter User Name

2. Enter Password

3. Click on the Sign In button

Obviously I cannot provide the account information. So basically, I've tried to use the cy.get command with referring to the element ID or class name. Initially the elements looked easy to refer to with Cypress, since they contain both ID and Class name, as well as placeholders. I've tried implementing all of those but had no success. The issue I receive is always the same: Cypress cannot find the element.

Here is an example of code I've tried to use:

describe('Write into input element', () => {
  it('should write "123" into the input element', () => {
    // Visit the page where the input element is located
    cy.visit('https://backoffice.iqos.com/backoffice/login.zul');
   
    cy.get('placeholder[data-cy="Enter user name"]:visible').click();
  });
});

Answer 1

It's not enough to go straight to the "User Name" input and type the credentials.

There is a "Processing" spinner upon startup, so to make the test reliable you should wait for this spinner and the opaque mask div.z-modal-mask (that covers the inputs you want to fill) to be removed from the page.

Without this step, the test sometimes fails because the <input> elements are covered by the mask and spinner.

---

Test which waits for modal to finish

cy.visit('https://backoffice.iqos.com/backoffice/login.zul');

cy.get('div.z-modal-mask')            // this line waits for the mask to appear

cy.get('div.z-modal-mask', {timeout:10_000})
  .should('not.exist')                          // now wait for it to disappear

cy.get('input[placeholder="Enter user name"]')
  .type("username");

cy.get('input[placeholder="Enter password"]')
  .type("password");

Of course, you can add the option {force:true} to the .type() commands, as mentioned in the error message, but it's not a real test because the user would not be able to type into the covered elements.

Answer 2

You are trying to get a placeholder with the attribute data-cy which obviously doesn't exist. Instead you should be trying to search for an input field that has a placeholder of your value, so it should be like this instead which works!

describe('Write into input element', () => {
 it('should write "123" into the input element', () => {
  // Visit the page where the input element is located
  cy.visit('https://backoffice.iqos.com/backoffice/login.zul');
 
  cy.get('input[placeholder="Enter user name"]:visible').type("yourUsername");
  cy.get('input[placeholder="Enter password"]:visible').type("yourPass");
//   here you can either go for their class or its text
  cy.get('.login_btn').click();
  cy.get('button:visible').contains("Sign In").click();
 });
});