Protractor E2E testing: LoginPage

Question

So, I am trying to test my login page using protractor e2e testing for my ionic app. This is my first time using protractor and I am having trouble understanding the error that I am getting.

Error:- Failed: no such element: Unable to locate element: {"method":"css selector","selector":"*[id="user1"]"}

I'm stuck, i just need guidance. It's my first time testing.

app.e2e-spec.ts:

describe('Login tests', () => {

browser.driver.get('http://url.path/login');


it('login page works', function() {
  // Checking the current url
  var currentUrl = browser.driver.getCurrentUrl();
  expect(currentUrl).toMatch('/login');
});

it('should sign in', function() {


// Find page elements
 var userNameField = browser.driver.findElement(by.id('username'));

 var userPassField = browser.driver.findElement(by.id('password'));
//  var userLoginBtn  = browser.driver.findElement(By.id('loginbtn'));

// Fill input fields
userNameField.sendKeys('nick@email.com');
userPassField.sendKeys('123456');

// Ensure fields contain what we've entered
// expect(userNameField.getAttribute('value')).toEqual('nick@email.com');
// expect(userPassField.getAttribute('value')).toEqual('123456');

// Click to sign in - waiting for Angular as it is manually bootstrapped.
// userLoginBtn.click();

return browser.driver.wait(function() {
      return browser.driver.getCurrentUrl().then(function(url) {
          return /success/.test(url);
      });
}, 10000);
});
});

Login.html:

<!--
  Generated template for the LoginPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<link href="https://fonts.googleapis.com/css?family=Sacramento" type="text/css" rel="stylesheet">

<ion-header>

    <ion-navbar transparent>
      <!--ion-title>Login</ion-title-->
    </ion-navbar>

  </ion-header>


  <ion-content padding>

    <div class="align">
        <h1>Atelier</h1>
    </div>

      <ion-card>
          <ion-card-header>
           Login
          </ion-card-header>
          <ion-card-content>
             <ion-list >
               <ion-item>  
                   <ion-input id="username" type="email"      placeholder="Email" [(ngModel)]="user.email"></ion-input>
               </ion-item>
               <ion-item>  
                   <ion-input id ="password" type="password" placeholder="Password" [(ngModel)]="user.password"></ion-input>
               </ion-item>
              <button  ion-button full clear color="light" (click)="login(user)">Login</button>
              <button ion-button block round outline color="light" (click)="register()">Register</button>
             </ion-list>    
          </ion-card-content>
        </ion-card>

  </ion-content>

    <style>
      h1{
        font-size: 3em;
        text-align: center;
        font-family: Sacramento;
        font-style: cursive;
        color: white;
        text-shadow: 4px 4px 4px rgba(0,0,0,0.1); 
      }
  </style>

app.po.ts:

import { browser, by, element } from 'protractor';

export class LoginPage {
 navigateTo(){
  return browser.get('/login');
 }
 get usernameLabel() {
  return element(by.css('.login-field:nth-child(1) label'));
  }

 getEmailTextbox() {
  return element(by.id('username'));
 }
 get passwordLabel() {
  return element(by.css('.login-field:nth-child(2) label'));
  }
getPasswordTextbox() {
 return element(by.id('password'));
  }
  }

   export class Page {

   navigateTo(){
    return browser.get('/login');
      }

    getTitle() {
   return browser.getTitle();
    }

   getPageOneTitleText() {
   return element(by.tagName('page-page1')).element(by.tagName('ion-  title')).element(by.css('.toolbar-title')).getText();
     }

  goToLoginPage(): any{
   let LoginPage = require("../src/pages/login/login").default;
   return new LoginPage();
  }

 getUser(){
   return element(by.id('username'))
 }

  getPass(){
   return element(by.id('password'))
   }

 }

Answer 1

If you get this error fro Protractor

Error:- Failed: no such element: Unable to locate element: {"method":"css selector","selector":"*[id="user1"]"}

and you are using this locator that is not possible because you are using id= username and your protractor return "selector":"*[id="user1"]" that is not believable.

 var userNameField = browser.driver.findElement(by.id('username'));

 var userPassField = browser.driver.findElement(by.id('password'));

you are using protractor then you must user protractor locator protractor provides the awesome locator class then you must use protractors locators.

you can use element(by.model('user.email')) that is best suitable for your test.