Jim Lynch Codes
  • Blog
  • About Jim

Writings about one coder's stories & experiences.

Checking If An Element Exists in Protractor

6/4/2016

0 Comments

 
If you use the page object pattern when setting up e2e tests (as they are written in the gulp-angular yeoman generated project) then you might want to check that the properties of this page object are actually elements that exist on your page. Indeed, checking that my page object elements exist is almost always the first protractor test that I write. I naively tried a method that didn't work so great at first before finally finding the glorious "isPresent()" method available on my page object elements. 

Here's the code from the file where I'm defining my page object:
'use strict';

var MainPage = function() {
  this.input = element(by.css('.my-input'));
  this.resultText = element(by.css('.my-header'));

  this.nonexistentEl = element(by.css('.an-element-with-this-class-does-not-exist'));

};

module.exports = new MainPage();
And here is an example of a BAD assertion statement that won't work right in Protractor tests.
it('should have our elements defined', function() {
      expect(page.input).toBeDefined();
});

Problems With the Above Assertion

The problem with this approach is that inside of e2e tests the idea of defined or not defined has a different meaning. Relying on what is returned from the "toBeDefined" method is not going to work because even things that don't even in your document will come back as defined, and your protractor test runner will explode if you try something like this: 
it('should not have nonexisting elements defined', function() {
    expect(page.nonexistentEl).not.toBeDefined();

});
Picture
Screenshot of an exploded Protractor test runner.
It'a sad to see Protractor test runners suffering like this. The real problem with our code up there though is that "toBeDefined" is a Jasmine matcher, and when writing Protractor tests you're going to have to use Protractor matchers. Luckily, there is a Protractor matcher that does basically exactly what we're trying to get at.

The Solution - Use isPresent()

Like most software bugs that come up all these problems were caused by my own errors. :)
Is pretty easy to solve this particular problem though. After a quick google search and a peek at the protractor documentation you might learn that "checking is an element really exists on the page" in Protractor terms would be getting a reference to that element and calling .isPresent() on it. 
it('should have our elements defined', function() {
    expect(page.resultText.isPresent()).toEqual(true);

  });
Or if you prefer you could use the toBeTruthy / toBeFalsy matcher:
expect(page.resultText.isPresent()).toBeTruthy();
And we can even check that elements that shouldn't be present are actually not present:
it('should not have nonexisting elements defined', function() {
    expect(page.nonexistentEl.isPresent()).toEqual(false);
});

Where to Go From Here

If you are just doing this for the first time then I'm actually really jealous of you. This is a really exciting time because it means that 1. you are up and running the "page object" protractor pattern so you have a clean way of accessing ANY element you can possible have in your website / web app and 2. you are able to test whether they are present in the page. If your test is checking that the element is in fact present and it's passing, then you can really trust that it's testing the actual elements on your page! From here you can start checking the text in elements:
page.h1El.getText()
 look at css properties:
page.imgEl.getAttribute('src')
or even send fake mouse events to them:
page.imgEl.getAttribute('src')
Although this is a very fundamentally different approach from Unit testing, automated testing with Protractor is a fun and exciting world in it's own right, and the sooner you start writing these tests the better off your software will be. :)
0 Comments

Your comment will be posted after it is approved.


Leave a Reply.

    ​Author

    Picture
    The posts on this site are written and maintained by Jim Lynch. About Jim...
    Follow @JimLynchCodes
    Follow @JimLynchCodes

    Want FREE access to
    my daily stock tips 
    ​newsletters??
    Sign up here:

    - Triple Gainers
    - Rippers N' Dippers
    - Growingest Growers
    ​

    Categories

    All
    Actionscript 3
    Angular
    AngularJS
    Automated Testing
    AWS Lambda
    Behavior Driven Development
    Blogging
    Business Building
    C#
    C / C++
    ClojureScript / Clojure
    Coding
    Community Service
    CS Philosophy
    Css / Scss
    Dev Ops
    Firebase
    Fitness
    Flash
    Front End
    Functional Programming
    Git
    Go Lang
    Haskell
    Illustrations
    Java
    Javascript
    Lean
    Life
    Linux
    Logic Pro
    Music
    Node.js
    Planning
    Productivity
    Professionalism
    Python
    React
    Redux / Ngrx
    Refactoring
    Reusable Components
    Rust
    Security
    Serverless
    Shell Scripting
    Swift
    Test Driven Development
    Things
    TypeScript
    Useful Sites
    Useful Tools
    Video
    Website Development
    WebStorm
    Writing

    Archives

    February 2021
    January 2021
    October 2020
    September 2020
    May 2020
    April 2020
    February 2020
    January 2020
    December 2019
    October 2019
    September 2019
    August 2019
    July 2019
    June 2019
    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015

    RSS Feed

  • Blog
  • About Jim
JimLynchCodes © 2021