How do I wait until an element is visible with Protractor when Angular is not available?

Question

I have a login function that I'm using for a Protractor test, it looks like this:

var config = require("../helpers/config.js");

var login = function() {
    browser.driver.get(config.dsp.url);
    browser.driver.findElement(by.name("userName")).sendKeys(config.dsp.user);
    browser.driver.findElement(by.name("password")).sendKeys(config.dsp.password);
    return browser.driver.findElement(by.name("submit")).click().then(function() {
        return browser.driver.wait(function() {
            return browser.driver.isElementPresent(browser.driver.findElement(by.className("sample-class-name")));
        }, 360000);
    });
}

module.exports = login;

I can't use any of the protractor specific hooks because Angular is not used on this page, so I have to use the underlying webdriver API. The problem is, I can't seem to figure out how to wait until an element is visible using this wrapped webdriver object. Any help would be appreciated.

Answer 1

Try with the expected conditions from the underlying driver:

var config = require("../helpers/config.js");
var until = require('selenium-webdriver').until;

var login = function() {
    var driver = browser.driver;

    driver.get(config.dsp.url);
    driver.findElement(by.name("userName")).sendKeys(config.dsp.user);
    driver.findElement(by.name("password")).sendKeys(config.dsp.password);
    driver.findElement(by.name("submit")).click();

    return driver.wait(until.elementLocated(by.css(".sample-class-name")), 10000)
      .then(e => driver.wait(until.elementIsVisible(e)), 10000);
}

module.exports = login;