«Ошибка: ошибка при ожидании синхронизации транспортира со страницей» при выполнении тестов транспортира

Question

Я пытаюсь выполнить некоторые тесты Protractor в веб-приложении, которое состоит из угловых и неугловых компонентов. Мой код выглядит так:

describe("Test Name", function() {
  it("Test case", function() {
    // first execute steps on a non-Angular component
    browser.waitForAngularEnabled(false);
    // some test steps

    // then execute tests on an Angular component, which opens in a new browser tab
    browser.waitForAngularEnabled(true);
    // some more test steps
    });
});

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

Ошибка: ошибка при ожидании синхронизации Protractor со страницей: «и angularJS тестируемость, и угловая тестируемость не определены. Это может быть либо потому, что это неугловая страница, либо потому что ваш тест включает в себя навигацию на стороне клиента, которая может помешать начальной загрузке Protractor. Подробнее см. https://github.com/angular/protractor/issues/2643

Когда я удаляю browser.waitForAngularEnabled(true); из кода, шаги для неангулярного компонента выполняются успешно, затем угловой компонент приложения открывается на новой вкладке браузера, ничего не происходит в течение 10 секунд (никакие шаги не выполняются ) и браузер закрывается со следующей ошибкой:

Ошибка: время ожидания истекло после 10007 мс

Answer 1

Вы, вероятно, должны учитывать асинхронный код и ждать разрешения обещаний. Кроме того, добавьте параметр done Жасмина к функции теста, чтобы сообщить селену о завершении теста.

Еще одна причина, которая может вызвать это, - активировать waitForAngularEnabled до того, как вы попадете на угловую страницу. Я предлагаю вам префикс этого вызова с вызовом, чтобы проверить, что что-то на странице уже загружено , чтобы вы знали, что angular готов к транспортировке транспортиром перед ожиданием угловых действий.

Важно отметить, что транспортир ожидает следующего действия после waitForAngularEnabled(true), чтобы инициировать проверку, полагаясь на это, что может сделать проблему неясной, если через некоторое время кто-то изменит код.

describe("Test Name", function() {
  it("Test case", function(done) {
    // first execute steps on a non-Angular component
    browser.waitForAngularEnabled(false)
      .then(() => /* step1 */)
      .then(() => /* step2 */)
      // ...
      // ? this one is very important to make sure
      // we're in an angular page ?
      .then(() => ensurePageTitleIsVisible())
      .then(() => browser.waitForAngularEnabled(true))
      .then(() => done())
      .catch((err) => done.fail(err));
  });
});

function ensurePageTitleIsVisible() {
  return browser.wait(ExpectedConditions.visibilityOf(PAGE_TITLE_SELECTOR), jasmine.DEFAULT_TIMEOUT_INTERVAL, 'Title does not exist after timeout');
}

Это может также дать вам лучшее сообщение об ошибке.

и, конечно, вы можете сделать то же самое с синтаксисом async \ await.

describe("Test Name", function() {
  it("Test case", function(done) {
    try {
      // first execute steps on a non-Angular component
      await browser.waitForAngularEnabled(false)
      await step1();
      await step2();
      // ...
      await browser.waitForAngularEnabled(true);
      done();
    } catch(err) {
      done.fail(err);
    }
  });
});

По сути, ваша проблема возникает из-за того, что вы продолжаете выполнять шаги теста до фактического завершения функции browser.waitForAngularEnabled.

Answer 2

используйте browser.ignoreSynchronization = true; при взаимодействии с неангулярным пользовательским интерфейсом, поскольку это заставляет транспортир не ждать угловых обещаний

и browser.ignoreSynchronization = false;, за которыми следует browser.waitForAngular(); при взаимодействии с угловым пользовательским интерфейсом