как использовать транспортир на веб-сайте, отличном от angularjs?

82

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

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

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

Error: Angular could not be found on the page https://www.stratexapp.com/ : retries looking for angular exceeded
Абделькрим
источник

Ответы:

75

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

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

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();
Эйтан Пир
источник
2
просто глупый вопрос, by.idпоменял на By.id?
Val
7
@Val - global.by = global.By = protractor.By; (источник - github.com/angular/protractor/commit/… )
Эйтан Пир
Как найти элемент по классу и другими способами неугловых сайтов?
Ишварамурти К.
@EaswaramoorthyK by.className. См. Документы
Murali KG
130

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

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();
Андрей Безязычный
источник
5
Мне понравился этот подход, позволяющий сохранить согласованность кода во всем тестовом костюме.
радость
4
Это определенно лучший подход при работе с транспортиром на неугловой плоскости. Об этом есть сообщение в блоге, в котором объясняется еще кое-что. Для тех, кто ищет E2E, есть также nightwatch.js , intern , casperjs , webdriver
Ciro Costa
1
@Andrei Как насчет pageObjects. когда я объявляю элементы вне функционального блока и пытаюсь запустить, он показывает мне фрагмент кода NoSuchElementError: this.buttonOnLeftSide = browser.driver.findElement (by.className ('leftbutton')); this.iframe = 'emulatorFrame'; this.clickPlusSignOnTemplateEditor = функция () {browser.driver.ignoreSynchronization = true; console.log («эй»); browser.driver.switchTo (). frame (this.iframe); console.log ('внутри iframe'); browser.sleep (3000); buttonOnLeftSide.click (); };
Ник
Просто поместите его сюда, если у кого-то такая же проблема, как у меня. Пожалуйста, помните об этом подходе, это хорошо, но если вы хотите быстро потерпеть неудачу . В некоторых случаях / средах вы можете работать вечно, хотя тесты не пройдены.
Линь Фам
У меня есть jasmine.DEFAULT_TIMEOUT_INTERVAL после того, как я нажму кнопку отправки. Есть идеи?
ji-ruh
16

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');
МэтьюТомас
источник
в его поведении есть ошибки
Муним Хабиб
2

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

browser.ignoreSynchronisation = true;
browser.get('url');
случайный парень
источник
2

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

 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  
       },
Самира Де Силва
источник
Во втором подходе предположим, что у вас нет скриптов angular.
Самира Де Силва
1

Лично я не добился успеха с предложенными решениями, поскольку элементы 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

Матье Дспрз
источник
1
Разве это не должно быть browser.waitForAngularEnabled (false) вместо true?
onluiz
1

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

beforeAll(function() {
    browser.waitForAngularEnabled(false);
});
Анил Кумар
источник
1

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

   onPrepare: function () {
       browser.ignoreSynchronization = true;      
   }
Мридул
источник
1

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

app- browser.ignoreSynchronization = true;
Мухаммад Ирфан
источник
0

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

browser.ignoreSynchronization = true;

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

browser.ignoreSynchronization = false;
Мухаммад Ирфан
источник
0

Я работаю над веб-приложением 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);
    },
};
Кхьяти Сегал
источник
-5

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

  • Синтаксис ES2016
  • не нужны дополнительные зависимости, конфиги и плагины браузера
  • гибкие селекторы
  • простая установка
Млозев
источник
6
дорогой @mlosev, это не дает прямого ответа на вопрос. вопрос в том, «как использовать Protector ...», а не «какую библиотеку я должен использовать вместо Protector» :-)
Абделькрим