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


82

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

Respuestas:


75

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

2
solo una pregunta tonta, ha by.idcambiado a By.id?
Val

7
@Val - global.by = global.By = transportador.By; (fuente - github.com/angular/protractor/commit/… )
Eitan Peer

¿Cómo encontrar elementos por clase y otros medios de sitios no angulares?
Easwaramoorthy K

@EaswaramoorthyK by.className. Consulte los documentos
Murali KG

130

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

5
Me gustó este enfoque para mantener el código consistente en todo el traje de prueba.
alegría

4
Este es definitivamente el mejor enfoque cuando se trata de transportadores en no angulares. Hay una publicación de blog sobre esto que explica algunas cosas más. Para aquellos que buscan E2E, también hay nightwatch.js , intern , casperjs , webdriver
Ciro Costa

1
@Andrei ¿Qué hay de pageObjects? cuando declaro elementos fuera del bloque funcional y trato de ejecutarlo, me muestra el fragmento de código NoSuchElementError: this.buttonOnLeftSide = browser.driver.findElement (by.className ('leftbutton')); this.iframe = 'emulatorFrame'; this.clickPlusSignOnTemplateEditor = function () {browser.driver.ignoreSynchronization = true; console.log ('hey'); browser.driver.switchTo (). frame (este.iframe); console.log ('dentro de iframe'); browser.sleep (3000); buttonOnLeftSide.click (); };
Nick

Solo póngalo aquí en caso de que alguien tenga el mismo problema que el mío. Tenga en cuenta este enfoque, es bueno, pero si desea tener un error rápido . Es posible que la prueba se ejecute para siempre en algunos casos / entornos, aunque las pruebas fallan.
Linh Pham

Estoy teniendo jasmine.DEFAULT_TIMEOUT_INTERVAL después de hacer clic en el botón Enviar. ¿alguna idea?
ji-ruh

16

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

su comportamiento tiene errores
Muneem Habib

2

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

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

2

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

En el segundo enfoque, suponga que no tiene scripts angulares.
Sameera De Silva

1

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


1
¿No debería ser browser.waitForAngularEnabled (false) en lugar de true?
onluiz

1

agregue el siguiente fragmento en su archivo de especificaciones .js

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

1

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

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

1

Agregue el siguiente fragmento para aplicaciones no angulares:

app- browser.ignoreSynchronization = true;

0

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

browser.ignoreSynchronization = true;

y para aplicaciones angulares -

browser.ignoreSynchronization = false;

0

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

-5

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

6
querido @mlosev, esto no responde directamente a la pregunta. la pregunta es "cómo usar el protector ..." y no "qué biblioteca debería usar en lugar de Protector" :-)
Abdelkrim
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.