Protractor: How to select a dropdown option to avoid ElementNotVisibleError

Another problem we found last week using protractor was when we tried to click on a dropdown option.

This was the problematic code:

	describe("A project landings list page", function () {
	var TestTools = require('./TestTools'),
	Navigation = require('./Navigation'),
	ptor;
	beforeEach(function () {
	TestTools.resetTestData();
	ptor = protractor.getInstance();
	ptor.get('/ebo/#/projects/excecutive-education');
	Navigation.logIn(ptor);
	TestTools.waitForElementByCssToBePresent('.project-item__title', ptor);
	});
	// some tests ...
	it("shows a new 'autoresponder' mailing", function () {
	element(by.css('#new_ma')).click(); // <- produces an error
	expect(ptor.getCurrentUrl())
	.toMatch('/projects/excecutive-education/new-mailing/ma');
	});
	});

view raw e2eWithElementNotVisibleError.js hosted with ❤ by GitHub

which caused the following error:
ElementNotVisibleError: element not visible

This happened because the element we were trying to click on was hidden.

Googling a bit again, we found (here) that to avoid the error we had to click on the dropdown before clicking on the option to open it up, so that it wa visible to the user:

	it("shows a new 'autoresponder' mailing", function () {
	element(by.css('.dropdown .new_mailings')).click(); // <- this fixes it
	element(by.css('#new_ma'))
	.click().then(function () {
	expect(ptor.getCurrentUrl())
	.toMatch(
	'/projects/excecutive-education/new-mailing/ma'
	);
	}
	);
	});

view raw e2eWithElementNotVisibleErrorFixed.js hosted with ❤ by GitHub

Again we extracted this bit of code into a helper method in out TestTools module:

	it("shows a new 'autoresponder' mailing", function () {
	TestTools.clickDropdownOption( // <- helper
	'.dropdown .new_mailings', '#new_ma'
	).then(function () {
	expect(ptor.getCurrentUrl())
	.toMatch(
	'/projects/excecutive-education/new-mailing/ma'
	);
	}
	);
	});

view raw e2eWithElementNotVisibleErrorFixedRefactored.js hosted with ❤ by GitHub

----------------

PS: Check also my previous post about Protractor:

• How to avoid UnexpectedAlertOpenError