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

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();
 });
});