Here we learn to use Protractor with Selenium WebDriver providing the functionality to take screenshots.
Update: Andrew Batz has kindly put together an NPM-installable package with the code in this article. Click here to check it out or download it using
npm install screenshot-protractor
As I work with SPAs (Single Page Applications) it becomes more obvious that some parts of a web app can only be inspected visually. As part of an end2end test or user acceptance testing, manually checking screenshots is still faster than manual testing. Screenshots at different steps of a process can be put together into a presentation or PDF and presented to clients or other stakeholders to show them that not only is the backend code working, but the frontend looks and feels right.
So here’s a snippet for taking a screenshot with Protractor, which is designed for AngularJS, and an end2end test that uses Jasmine and Protractor:
When to take screenshots during an end2end test:
- to inspect the layout/styling
- to inspect how the site looks across multiple browsers
- to verify with client/stakeholders that we’re building the right thing
- to share with other developers when debugging an issue
Found a good article on how to test AngularJS with Protractor and dropdown menus: https://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/
The issue with testing dropdowns in protractor is that you are relying on certain web browser behavior to work. In the article, there is code for how to test dropdowns properly.
Here is a snippet of the code distilled to its essence, the selection of the option elements using Protractor’s locators, clicking an option value and then validating a particular option has been chosen.
let dropdown = element(by.id('my-select-dropdown-element'));
// Clicking on the first option of the dropdown
let index = 0;
// Validating that the option has been selected
let expectedOption = 'first_option';
let checkedOptions = element(by.id('my-select-dropdown-element'))
// Filter for checked items and that the exact option value was selected
return optionElement.getAttribute('checked') == true
&& optionElement.getAttribute('value') == expectedOption;
// Expect that the first option was selected
What we’re doing in the above code snippet is we are first selecting the dropdown element. Then we collect all of the option elements of the dropdown and call the click function on the first one.
Afterward, we validate that the correct option was selected by selecting the dropdown element, then searching through the list of options for the checked attribute to be true and the value attribute to have the same value as the expected option.
If you’re interested in Protractor for testing, you may also be interested in using Protractor to take screenshots of what you’re testing with Selenium.