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('[email protected]');
userPassField.sendKeys('123456');

// Ensure fields contain what we've entered
// expect(userNameField.getAttribute('value')).toEqual('[email protected]');
// 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'))
   }

 }

From your given error "selector":"*[id="user1"]", your script failed to find an web element which id=user1, but from your given HTML and test script, nothing hints there is such element. — yong
Honestly, you have too many problems in your script. Some of them are - try moving browser.driver.get('http://url.path/login'); in your it block. var currentUrl = browser.driver.getCurrentUrl(); returns a promise, not a value. browser.driver.findElement(by.id('username')); looks like webdriver syntax. and in any case, your script fails because of [id="user1"] element, which is not mentioned in your spec or PO — Sergey Pleshakov
and I personally tend to write everything in spec file, verify each command one by one and then move out whatever is needed to PO — Sergey Pleshakov

Bhatasana Prashant Bhatasana Prashant · Accepted Answer · 2019-05-03T12:54:17

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.

Protractor E2E testing: LoginPage

1 Answers