I'm currently exploring protractor e2e testing for my ionic app to test the login page. This is my first venture into using protractor, and I'm encountering difficulties interpreting the error message that keeps popping up.
Error:- Failed: no such element: Unable to locate element: {"method":"css selector","selector":"*[id="user1"]"}
Feeling stuck and in need of some guidance as a newbie in the testing realm.
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() {
// Locating page elements
var userNameField = browser.driver.findElement(by.id('username'));
var userPassField = browser.driver.findElement(by.id('password'));
userNameField.sendKeys('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b7b0bab299bcb4b8b0b5f7bab6b4">[email protected]</a>');
userPassField.sendKeys('123456');
return browser.driver.wait(function() {
return browser.driver.getCurrentUrl().then(function(url) {
return /success/.test(url);
});
}, 10000);
});
});
Login.html:
<!--
Custom template for the LoginPage page.
Referencing font styles and design elements.
-->
<link href="https://fonts.googleapis.com/css?family=Sacramento" type="text/css" rel="stylesheet">
<ion-header>
<ion-navbar transparent>
<ion-title align="center">Atelier</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'))
}
}