Как использовать Protractor на сайте non angularjs?

Я нашел Protractor Framework, который сделан для веб-приложений AngularJS.

Как я могу использовать Protractor на сайте, который не использует AngularJS?

Я написал свой первый тест, и Protractor выдает это сообщение:

Error: Angular could not be found on the page https://www.stratexapp.com/ : retries looking for angular exceeded
Источник

13 ответов

Решение

Если ваш тест должен взаимодействовать с неугловой страницей, обратитесь к экземпляру веб-драйвера напрямую с помощью browser.driver,

Пример из документации по транспортирам

browser.driver.get('http://localhost:8000/login.html');

browser.driver.findElement(by.id('username')).sendKeys('Jane');
browser.driver.findElement(by.id('password')).sendKeys('1234');
browser.driver.findElement(by.id('clickme')).click();
Источник

Другой подход состоит в том, чтобы установить browser.ignoreSynchronization = true до browser.get(...). Транспортир не будет ждать загрузки Angular, и вы можете использовать обычный синтаксис элемента (...).

browser.ignoreSynchronization = true;
browser.get('http://localhost:8000/login.html');

element(by.id('username')).sendKeys('Jane');
element(by.id('password')).sendKeys('1234');
element(by.id('clickme')).click();
Источник

waitForAngular теперь должно использоваться вместо устаревшего свойства ignoreSynchronization.

Следующее руководство waitForAngular берется из документации по Protractor для тайм-аутов:

Как отключить ожидание Angular

Если вам нужно перейти на страницу, которая не использует Angular, вы можете отключить ожидание Angular, установив `browser.waitForAngularEnabled(false). Например:

browser.waitForAngularEnabled(false);
browser.get('/non-angular-login-page.html');

element(by.id('username')).sendKeys('Jane');
element(by.id('password')).sendKeys('1234');
element(by.id('clickme')).click();

browser.waitForAngularEnabled(true);
browser.get('/page-containing-angular.html');
Источник

Забудь ignoreSynchronization!!! Его больше нет в транспортире, начиная с транспортира. 5.3.0

browser.waitForAngularEnabled(false) следует использовать вместо

Пошаговая инструкция по использованию

Protractor имеет встроенную обработку ожидания angular, и это его отличает. Однако, если страница не является угловой, транспортир будет зависать до тех пор, пока не достигнет ошибки тайм-аута, поэтому вам необходимо отключить эту функцию, чтобы протестировать неугловую страницу. Также существует крайний случай, когда страница имеет угловой вид, но эта функция ВСЕ ЕЩЕ будет вызывать ошибку транспортира. Выполните следующие действия, чтобы узнать, когда отключить транспортир в ожидании углового

  1. Узнайте, является ли ваша страница Angular: откройте консоль разработчика в браузере и внутри команды запуска вкладки 'console'
      getAllAngularTestabilities()

Если на выходе getAllAngularTestabilities is not defined, то ваша страница не угловая, перейдите к последнему шагу, чтобы отключить встроенное ожидание

  1. Запустите эти команды в консоли
      getAllAngularTestabilities()[0]._ngZone.hasPendingMacrotasks
getAllAngularTestabilities()[0]._ngZone.hasPendingMicrotasks

Если что-то из этого вернется true(если есть нерешенные микро- или макро-задачи), перейдите к последнему шагу. Если все falseПоздравляю, вы можете использовать встроенный транспортир в ожидании angular. Но если вам это не нравится, как мне, то прочитайте последний шаг, чтобы узнать, как его отключить.

  1. Выполните указанную выше команду. НО! Он возвращает обещание, которое необходимо обработать, предпочтительно с использованием ключевого слова
      await browser.waitForAngularEnabled(false)

Эту команду можно запускать где угодно: в it блок, в beforeAll, или в onPrepareвашей конфигурации. Просто убедитесь, если вы используете await сделать соответствующий блок async

      beforeAll(async () => await browser.waitForAngularEnabled(false))
Источник

Чтобы проверить на не угловом сайте, вы должны удалить синхронизацию. для этого используйте следующее:

browser.ignoreSynchronisation = true;
browser.get('url');
Источник

В некоторых случаях, чтобы избежать ошибок, необходимо добавить оба значения.

 browser.driver.ignoreSynchronization = true;
 browser.waitForAngularEnabled(false);

Вы можете добавить их в файл spec.js.

describe('My first non angular class', function() {
    it ('My function', function() {
        browser.driver.ignoreSynchronization = true;
        browser.waitForAngularEnabled(false);

Или, как предложено @Mridul, добавьте их в файл config.js.

exports.config = {directConnect: true, framework: 'жасмин',

  onPrepare: function () {
         browser.driver.ignoreSynchronization = true;// for non-angular set true. default value is false 
         browser.waitForAngularEnabled(false);   // for non-angular set false. default value is true  
       },
Источник

Добавьте приведенный ниже фрагмент в файл спецификации.js

beforeAll(function() {
    browser.waitForAngularEnabled(false);
});
Источник

Добавьте следующий фрагмент кода в файл conf.js

   onPrepare: function () {
       browser.ignoreSynchronization = true;      
   }
Источник

Добавьте ниже фрагмент для приложений, отличных от angular:

app- browser.ignoreSynchronization = true;
Источник

Лично я не добился успеха с предлагаемыми решениями, так как элементы DOM не были загружены вовремя.

Я пробовал много способов справиться с этим асинхронным поведением, включая browser.wait с browser.isElementPresent, но ни один из них не удовлетворил.

Что сделал трюк с использованием Protractor, возвращенного Promises от его методов в onPrepare:

onPrepare: () => {

    browser.manage().window().maximize();

    browser.waitForAngularEnabled(true).then(function () {
        return browser.driver.get(baseUrl + '/auth/');
    }).then(function () {
        return browser.driver.findElement(by.name('login')).sendKeys('login');
    }).then(function () {
        return browser.driver.findElement(by.name('password')).sendKeys('password');
    }).then(function () {
        return browser.driver.findElement(by.name('submit')).click();
    }).then(function () {
        return true;
    });

    return browser.driver.wait(function () {
        return browser.driver.getCurrentUrl().then(function (url) {
            return /application/.test(url);
        });
    }, 10000);
},

Я был вдохновлен https://github.com/angular/protractor/blob/master/spec/withLoginConf.js

Источник

Используйте нижеприведенный фрагмент в файле config.js для приложений, отличных от angular:

browser.ignoreSynchronization = true;

а для углового применения -

browser.ignoreSynchronization = false;
Источник

Я работаю над веб-приложением aurelia, которое представляет собой структуру FE, аналогичную Angular, React. Здесь я использую транспортир для автоматизации.

Tech Stack из моего проекта:-

  • Транспортир
  • Машинопись
  • Модальный объект страницы
  • Огурец
  • Чай
  • узел
  • npm
  • Код VS (IDE)

Основное изменение происходит только в файле конфигурации, я могу добавить код в github, если это поможет, вот файл конфигурации, который я использую в своем проекте, который идеально подходит для меня. Также опубликовал несколько блогов в моем WordPress, надеюсь, что это может помочь.

const reporter = require('cucumber-html-reporter');
exports.config = {
    SELENIUM_PROMISE_MANAGER: false,
    directConnect: true,
    specs: ["./e2e/features/*/EndToEnd.feature"],
    format: 'json:cucumberReport.json',
    framework: 'custom',
    frameworkPath: require.resolve('protractor-cucumber-framework'),
    cucumberOpts: {
        strict: true,
        format: 'json:cucumberReport.json',
        keepAlive: false,
        require: [
            './e2e/hooks/*.ts',
            './e2e/stepDefinition/*/*.ts',
        ],
       tags: '@Regression'
    },
    beforeLaunch: function () {
        require('ts-node/register')
    },
    onPrepare: async () => {
        await browser.waitForAngularEnabled(false);
        await browser.ignoreSynchronization == true;
        await browser.manage().window().maximize();
        await browser.manage().timeouts().implicitlyWait(10000);
     },
    onComplete: async () => {
         var options = {
            theme: 'bootstrap',
            jsonFile: './reports/cucumberReport.json',
            output: './reports/cucumberReport.html',
            reportSuiteAsScenarios: true,
            launchReport: false,
            screenshotsDirectory: './reports/screenshots',
            storeScreenshots: true,
            metadata: {
                "Test Environment": "SAND-DEV-1",
                "Platform": "Windows 10",
            }
        };
        reporter.generate(options);
    },
};
Источник

Вместо Protractor вы можете использовать для тестирования e2e Testcafe.
Плюсы:

  • Синтаксис ES2016
  • не нужны дополнительные зависимости, конфиги и плагины браузера
  • гибкие селекторы
  • простая настройка
Источник
Другие вопросы по тегам