Используйте транспортир для проверки входа на страницу, отличную от AngularJS

У меня есть приложение AngularJS, которое аутентифицируется с использованием SSO OAuth в GitHub. Я пытаюсь выяснить способ использования транспортира и автоматизировать тесты входа в систему. Я не могу понять, как получить поле не angular и как управлять ожиданием загрузки страницы с помощью browser.driver, My spec выглядит так:

// Create a repository                                                                                                                     
describe('login', function() {

  it('should login', function() {
      // this issues a redirect to GitHub
      browser.driver.get( process.env.HOST + '/auth/github' ) 
      browser.sleep( 4000 ); // Sleep to make sure page loads fully..                                                                      
      // browser.debugger(); // tried to use debugger...                                                                                   
      var login = element( by.id( "login_field" ) );
      login.sendKeys( process.env.USERNAME );
      var password = element( by.id( "password" ) );
      password.sendKeys( process.env.PASSWORD )
  });                                                                                                                                      
});

Я запускаю команду следующим образом:

HOST=http://someserver.com.dev USERNAME=foobar PASSWORD=barfoo protractor config/protractor.conf

Как правильно загрузить страницу проверки подлинности, ввести правильную информацию в поля, а затем дождаться перенаправления обратно в мое приложение с угловым выражением (я могу обрабатывать вещи оттуда).

Я попытался использовать отладчик для перехода в этот код, но для меня это было неинтуитивно. Когда отладчик заблокирован, я, кажется, не был внутри своего кода, но внутри cli.js. Если я нажму 'c', то мой script продолжил весь путь к выполнению и провалился, не заблокировав его дальше. Я не понимаю, где использовать команду отладчика внутри моего script? И от инспектора Chrome я надеялся использовать window.clientSideScripts.findInputs, но также был помешан; они, по-видимому, относятся к элементам AngularJS, а не к элементам, которые не являются угловыми.

Ответ 1

Тестирование не angular страниц с помощью Protractor может быть сложным в отношении ожидания материала.

Я предлагаю вам обновить Protractor до последней версии (на данный момент 1.5.0), используйте пользовательскую функцию waitReady(), что browser.wait для элементов готовы и переписать ваш тест, как показано ниже.

// TODO: use page objects
var loginNameInputElm = $('#login_field'); // or element(by.id('login_field'))
var passwordInputElm = $('#password'); // same as element(by.id('password'))
var loginBtnElm = $('button[type=submit]');

it('non-angular page so ignore sync and active wait to load', function() {
    browser.ignoreSynchronization = true;
    browser.get(process.env.HOST + '/auth/github');
    expect(loginNameInputElm.waitReady()).toBeTruthy();
    expect(passwordInputElm.waitReady()).toBeTruthy();
});

it('should fill user and password and logins', function() {
    loginNameInputElm.sendKeys(process.env.USERNAME);
    passwordInputElm.sendKeys(process.env.PASSWORD);
    loginBtnElm.click();
});

it('restores ignore sync when switching back to angular pages', function() {
    browser.ignoreSynchronization = false; // restore
    browser.get('/some-angular-page');
});

Подробнее о том, почему waitReady здесь.

Примечание: в прошлом я предлагал установить высокий неявный, например.

browser.manage().timeouts().implicitlyWait(5000);

Этот хак позволяет избежать waitReady и продолжать использовать стандартный

expect(loginNameInputElm.isPresent()).toBeTruthy();

Но имеет уродливый недостаток при тестировании элементов НЕ, т.е. при тестировании отсутствующих или невидимых элементов, и в этом случае он будет ждать 5 секунд (5000 мс) в флюгере, например. при выполнении

expect(someNonExistingElm.isPresent()).toBeFalsy();