¿Cómo usar Transportador en un sitio web que no sea angularjs?

Encontré el marco Protractor que está hecho para aplicaciones web AngularJS.

¿Cómo puedo usar Protractor en un sitio web que no usa AngularJS?

Escribí mi primera prueba y Transportador activa este mensaje:

Error: Angular could not be found on the page https://www.stratexapp.com/ : retries looking for angular exceeded

Si su prueba necesita interactuar con una página no angular, acceda a la instancia de webdriver directamente con browser.driver.

Ejemplo de documentos de transportador

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();

Otro enfoque es establecer browser.ignoreSynchronization = true antes browser.get (...). Transportador no esperaría a que Angular se cargara y podría usar la sintaxis de elemento habitual (...).

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 ahora debería usarse en lugar de la propiedad ignoreSynchronization en desuso.

La siguiente guía de waitForAngular se toma de los documentos del transportador para los tiempos de espera:

Cómo deshabilitar la espera de Angular

Si necesita navegar a una página que no usa Angular, puede desactivar la espera de Angular configurando `browser.waitForAngularEnabled (false). Por ejemplo:

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');

Para probar en un sitio no angular, debe eliminar la sincronización. para eso use lo siguiente:

browser.ignoreSynchronisation = true;
browser.get('url');

En algunas ocasiones, para evitar errores es necesario sumar ambos valores.

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

Puede agregarlos en el archivo spec.js.

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

O como sugirió @Mridul, agréguelos en el archivo config.js.

export.config = {directConnect: true, framework: 'jazmín',

  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  
       },

Personalmente, no tuve éxito con las soluciones propuestas ya que los elementos DOM no se cargaron correctamente a tiempo.

Intenté muchas formas de manejar ese comportamiento asincrónico, incluido browser.wait con browser.isElementPresent, pero ninguna de ellas fue satisfactoria.

Lo que hizo el truco fue usar Promesas devueltas por transportador de sus métodos en 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);
},

Me inspiré en https://github.com/angular/protractor/blob/master/spec/withLoginConf.js

agregue el siguiente fragmento en su archivo de especificaciones .js

beforeAll(function() {
    browser.waitForAngularEnabled(false);
});

Agregue el siguiente fragmento de código en el archivo conf.js

   onPrepare: function () {
       browser.ignoreSynchronization = true;      
   }

Agregue el siguiente fragmento para aplicaciones no angulares:

app- browser.ignoreSynchronization = true;

Use el siguiente fragmento en su archivo config.js para aplicaciones no angulares

browser.ignoreSynchronization = true;

y para aplicaciones angulares -

browser.ignoreSynchronization = false;

Estoy trabajando en la aplicación web aurelia , que es un marco FE similar a Angular, React. En esto estoy usando Transportador para la automatización.

Tech Stack cuál de mi proyecto: -

• Transportador
• Mecanografiado
• Modal de objeto de página
• Pepino
• Chai
• nodo
• npm
• Código VS (IDE)

El cambio principal ocurre solo en el archivo de configuración, puedo agregar código en github si eso ayuda, aquí está el archivo de configuración que estoy usando en mi proyecto que funciona perfectamente para mí. Publiqué algunos blogs también en mi wordpress , espero que puedan ser de ayuda.

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);
    },
};

En lugar de Transportador, puede usar para e2e probar el Testcafe .
Pros:

• Sintaxis de ES2016
• no necesita dependencias adicionales, configuraciones y complementos del navegador
• selectores flexibles
• configuración fácil