Cursos Empresas Blog Live Conf Eventos Precios

0:0037:52

Hacer un E2E

Curso Avanzado de Automatización de Pruebas con Puppeteer

Clase 16 de 24

Clase 16 / 24

this.inputs = {
            from: "//input[@name='from' and @id='autocomplete']",
            to: "//input[@name='to' and @id='autocomplete2']",
            date: "//input[@class='depart form-control' and 		 
            @id='departure']", 
            passenger: "//a[@class='dropdown-toggle dropdown- 
            btn waves-effect' and @role='button']",
            search: "//button[@id='flights-search']",
            firstOption: ".autocomplete-result[data-index='0']",
            moreAdultsPassengers: "(//i[@class='la la-plus'])[1]" 

        }

 FAIL  __tests__/chat.test.js (100.805 s)
  ● Chat Tests › Verify input and basic options to send messages

    thrown: "Internal Error - Null scene reference"

      at _getError (node_modules/jest-circus/build/utils.js:432:18)
          at Array.map (<anonymous>)

``` Este error esta ocacionando fallas en todas las pruebas, ya revise las versiones de los paquetes npm y actualice a las versiones mas actuales y aun asi sigue fallando, antes no daba este error y en estos dias comenzo a fallar el framework siempre en este error? Alguien sabe como puedo solucionarlo?

import BasePage from "./BasePage";

export default class LoginPage extends BasePage {
    constructor() {
        
        super(); // Pass the page instance to the BasePage constructor, its necesary when heredando clases de otros archivos
        this.mainDiv = '#flights-search'
        this.inputs = {
            typeFromInputField: '#fadein > span > span > span.select2-search.select2-search--dropdown > input',
           ClickFromInputField: '#onereturn > div:nth-child(1) > div.input-items.from_flights > div.form-floating > span > span.selection',
            typeToInputField: '#fadein > span > span > span.select2-search.select2-search--dropdown > input',
            ClickToInputField: '#onereturn > div:nth-child(2) > div.input-items.flights_arrival.to_flights > div.form-floating > span > span.selection',
            date: '#departure',
            passengers: '#onereturn > div.col-lg-2 > div > div > div > a',
            search: '#onereturn > div:nth-child(5) > button',
            FirstOption: '#select2--results > li',
            moreAdultsPassengers: '#onereturn > div.col-lg-2 > div > div > div > div > div.dropdown-item.adult_qty > div > div > div.qtyInc',

        }
    }

  async validatePage() {
    console.log("Starting page validation...");
    try {    
    await page.waitForSelector(this.mainDiv)
    await page.waitForSelector(this.inputs.date)
    await page.waitForSelector(this.inputs.passengers)
    await page.waitForSelector(this.inputs.search)  
    } catch (e) {
        console.log("Error in page validation:", e.message);
        throw new Error(`Page validation failed: ${e.message}`);
    }
  }

  async FlightSelection(from, to, date, passengerAmount) {
    console.log(` ${from} ${to} ${date} ${passengerAmount}`);
  //  await page.focus(this.inputs.from); // Focus the input explicitly
  console.log("Select From city");
    // Step 1: Select "From" city
    await this.click(this.inputs.ClickFromInputField)            // Open dropdown
    await this.type(this.inputs.typeFromInputField, from)       // Type city name
    await page.waitForSelector(this.inputs.FirstOption)         //Ensure the first option appears
    await this.click(this.inputs.FirstOption)                  // Click the first option
                     
    console.log("Select To city");

     // Step 2: Select "To" city
    await this.click(this.inputs.ClickToInputField)             // Open dropdown
    await this.type(this.inputs.typeToInputField, to)           // Type destination city name
    await page.waitForSelector(this.inputs.typeToInputField)    // Wait for the first option to appear
    await this.click(this.inputs.FirstOption)                    // Click on the first option

    // Step 3: Select the flight date
    await this.tripleClick(this.inputs.date)
    await this.type(this.inputs.date, date)

    // Step 4: Handle passengers if more than 1
    if (passengerAmount !== 1) {
      await this.click(this.inputs.passengers)
      await page.waitForSelector(this.inputs.moreAdultsPassengers) //Awaits for the dropdown to appear
      for(let i = 0; i< passengerAmount -1; i++){
        await this.click(this.inputs.moreAdultsPassengers) 
      }
    }

    await this.click(this.inputs.search)
  }

   // Step 5: Search for the flight
  async validateFlights() {

    await this.wait(30)
  }

}
```import BasePage from "./BasePage";
export default class LoginPage extends BasePage {    constructor() {                super(); // Pass the page instance to the BasePage constructor, its necesary when heredando clases de otros archivos        this.mainDiv = '#flights-search'        this.inputs = {            typeFromInputField: '#fadein > span > span > span.select2-search.select2-search--dropdown > input',           ClickFromInputField: '#onereturn > div:nth-child(1) > div.input-items.from\_flights > div.form-floating > span > span.selection',            typeToInputField: '#fadein > span > span > span.select2-search.select2-search--dropdown > input',            ClickToInputField: '#onereturn > div:nth-child(2) > div.input-items.flights\_arrival.to\_flights > div.form-floating > span > span.selection',            date: '#departure',            passengers: '#onereturn > div.col-lg-2 > div > div > div > a',            search: '#onereturn > div:nth-child(5) > button',            FirstOption: '#select2--results > li',            moreAdultsPassengers: '#onereturn > div.col-lg-2 > div > div > div > div > div.dropdown-item.adult\_qty > div > div > div.qtyInc',
        }    }
  async validatePage() {    console.log("Starting page validation...");    try {        await page.waitForSelector(this.mainDiv)    await page.waitForSelector(this.inputs.date)    await page.waitForSelector(this.inputs.passengers)    await page.waitForSelector(this.inputs.search)      } catch (e) {        console.log("Error in page validation:", e.message);        throw new Error(`Page validation failed: ${e.message}`);    }  }
  async FlightSelection(from, to, date, passengerAmount) {    console.log(` ${from} ${to} ${date} ${passengerAmount}`);  //  await page.focus(this.inputs.from); // Focus the input explicitly  console.log("Select From city");    // Step 1: Select "From" city    await this.click(this.inputs.ClickFromInputField)            // Open dropdown    await this.type(this.inputs.typeFromInputField, from)       // Type city name    await page.waitForSelector(this.inputs.FirstOption)         //Ensure the first option appears    await this.click(this.inputs.FirstOption)                  // Click the first option                         console.log("Select To city");
     // Step 2: Select "To" city    await this.click(this.inputs.ClickToInputField)             // Open dropdown    await this.type(this.inputs.typeToInputField, to)           // Type destination city name    await page.waitForSelector(this.inputs.typeToInputField)    // Wait for the first option to appear    await this.click(this.inputs.FirstOption)                    // Click on the first option
    // Step 3: Select the flight date    await this.tripleClick(this.inputs.date)    await this.type(this.inputs.date, date)
    // Step 4: Handle passengers if more than 1    if (passengerAmount !== 1) {      await this.click(this.inputs.passengers)      await page.waitForSelector(this.inputs.moreAdultsPassengers) //Awaits for the dropdown to appear      for(let i = 0; i< passengerAmount -1; i++){        await this.click(this.inputs.moreAdultsPassengers)       }    }
    await this.click(this.inputs.search)  }
   // Step 5: Search for the flight  async validateFlights() {
    await this.wait(30)  }
}

import BasePage from "./BasePage";

export default class LoginPage extends BasePage {
    constructor() {
        
        super(); // Pass the page instance to the BasePage constructor, its necesary when heredando clases de otros archivos
        this.mainDiv = '#flights-search'
        this.inputs = {
            typeFromInputField: '#fadein > span > span > span.select2-search.select2-search--dropdown > input',
           ClickFromInputField: '#onereturn > div:nth-child(1) > div.input-items.from_flights > div.form-floating > span > span.selection',
            typeToInputField: '#fadein > span > span > span.select2-search.select2-search--dropdown > input',
            ClickToInputField: '#onereturn > div:nth-child(2) > div.input-items.flights_arrival.to_flights > div.form-floating > span > span.selection',
            date: '#departure',
            passengers: '#onereturn > div.col-lg-2 > div > div > div > a',
            search: '#onereturn > div:nth-child(5) > button',
            FirstOption: '#select2--results > li',
            moreAdultsPassengers: '#onereturn > div.col-lg-2 > div > div > div > div > div.dropdown-item.adult_qty > div > div > div.qtyInc',

        }
    }

  async validatePage() {
    console.log("Starting page validation...");
    try {    
    await page.waitForSelector(this.mainDiv)
    await page.waitForSelector(this.inputs.date)
    await page.waitForSelector(this.inputs.passengers)
    await page.waitForSelector(this.inputs.search)  
    } catch (e) {
        console.log("Error in page validation:", e.message);
        throw new Error(`Page validation failed: ${e.message}`);
    }
  }

  async FlightSelection(from, to, date, passengerAmount) {
    console.log(` ${from} ${to} ${date} ${passengerAmount}`);
  //  await page.focus(this.inputs.from); // Focus the input explicitly
  console.log("Select From city");
    // Step 1: Select "From" city
    await this.click(this.inputs.ClickFromInputField)            // Open dropdown
    await this.type(this.inputs.typeFromInputField, from)       // Type city name
    await page.waitForSelector(this.inputs.FirstOption)         //Ensure the first option appears
    await this.click(this.inputs.FirstOption)                  // Click the first option
                     
    console.log("Select To city");

     // Step 2: Select "To" city
    await this.click(this.inputs.ClickToInputField)             // Open dropdown
    await this.type(this.inputs.typeToInputField, to)           // Type destination city name
    await page.waitForSelector(this.inputs.typeToInputField)    // Wait for the first option to appear
    await this.click(this.inputs.FirstOption)                    // Click on the first option

    // Step 3: Select the flight date
    await this.tripleClick(this.inputs.date)
    await this.type(this.inputs.date, date)

    // Step 4: Handle passengers if more than 1
    if (passengerAmount !== 1) {
      await this.click(this.inputs.passengers)
      await page.waitForSelector(this.inputs.moreAdultsPassengers) //Awaits for the dropdown to appear
      for(let i = 0; i< passengerAmount -1; i++){
        await this.click(this.inputs.moreAdultsPassengers) 
      }
    }

    await this.click(this.inputs.search)
  }

   // Step 5: Search for the flight
  async validateFlights() {

    await this.wait(30)
  }

}
```import BasePage from "./BasePage";
export default class LoginPage extends BasePage {    constructor() {                super(); // Pass the page instance to the BasePage constructor, its necesary when heredando clases de otros archivos        this.mainDiv = '#flights-search'        this.inputs = {            typeFromInputField: '#fadein > span > span > span.select2-search.select2-search--dropdown > input',           ClickFromInputField: '#onereturn > div:nth-child(1) > div.input-items.from\_flights > div.form-floating > span > span.selection',            typeToInputField: '#fadein > span > span > span.select2-search.select2-search--dropdown > input',            ClickToInputField: '#onereturn > div:nth-child(2) > div.input-items.flights\_arrival.to\_flights > div.form-floating > span > span.selection',            date: '#departure',            passengers: '#onereturn > div.col-lg-2 > div > div > div > a',            search: '#onereturn > div:nth-child(5) > button',            FirstOption: '#select2--results > li',            moreAdultsPassengers: '#onereturn > div.col-lg-2 > div > div > div > div > div.dropdown-item.adult\_qty > div > div > div.qtyInc',
        }    }
  async validatePage() {    console.log("Starting page validation...");    try {        await page.waitForSelector(this.mainDiv)    await page.waitForSelector(this.inputs.date)    await page.waitForSelector(this.inputs.passengers)    await page.waitForSelector(this.inputs.search)      } catch (e) {        console.log("Error in page validation:", e.message);        throw new Error(`Page validation failed: ${e.message}`);    }  }
  async FlightSelection(from, to, date, passengerAmount) {    console.log(` ${from} ${to} ${date} ${passengerAmount}`);  //  await page.focus(this.inputs.from); // Focus the input explicitly  console.log("Select From city");    // Step 1: Select "From" city    await this.click(this.inputs.ClickFromInputField)            // Open dropdown    await this.type(this.inputs.typeFromInputField, from)       // Type city name    await page.waitForSelector(this.inputs.FirstOption)         //Ensure the first option appears    await this.click(this.inputs.FirstOption)                  // Click the first option                         console.log("Select To city");
     // Step 2: Select "To" city    await this.click(this.inputs.ClickToInputField)             // Open dropdown    await this.type(this.inputs.typeToInputField, to)           // Type destination city name    await page.waitForSelector(this.inputs.typeToInputField)    // Wait for the first option to appear    await this.click(this.inputs.FirstOption)                    // Click on the first option
    // Step 3: Select the flight date    await this.tripleClick(this.inputs.date)    await this.type(this.inputs.date, date)
    // Step 4: Handle passengers if more than 1    if (passengerAmount !== 1) {      await this.click(this.inputs.passengers)      await page.waitForSelector(this.inputs.moreAdultsPassengers) //Awaits for the dropdown to appear      for(let i = 0; i< passengerAmount -1; i++){        await this.click(this.inputs.moreAdultsPassengers)       }    }
    await this.click(this.inputs.search)  }
   // Step 5: Search for the flight  async validateFlights() {
    await this.wait(30)  }
}

Comentarios (6)6 comentarios

Hernan Camilo Jimenez Garcia

Hace 5 años

Me puse a buscar los selectores por mi cuenta y di con estos:

Randy Guerra

Hace 4 años

Esta clase, requiere mucha atencion.

Irving Juárez

Ya entendi lo de usar clases para mejorar la manera de hacer tests, se usa mucho un paradigma similar a los componentes, pero en lugar de componentes, son clases (que representan componentes, paginas, containers, etc). . La pregunta es, ¿Cómo se separan estas clases de testing con los componentes reales de la aplicacion en terminos de organizacion de archivos? . Mi primera idea es que se crea una carpeta tests/ y ahi se meten pages, components, etc... Pero me gustaria saber como lo hacen en sus empresas

Javier Fuentes Mora

Profesor

si normalmente se tiene una carpeta de pages donde se agregan todas las que se tienen, y hay algo llamado PageFragments para cuando son cosas como Modales o cosas que se comparten entre paginas , seria lo mas parecido a componentes

Miguel Angel Junior Rodriguez Valda

Hace 3 años

Muy buenas, desarrolle un framework siguiendo este curso, y funcionaba perfectamente hasta ayer que presento el siguiente error:

Gustavo Cortes

Hace 2 años

Como se hace para buscar en la consola de chrome ?

Giselle Katherin Castillo Ariza

te paras en la consola y con ctrl+f

David steven Abril Pulecio

Hacer un E2E

Progreso del curso

Para quién es este curso?

Conceptos Avanzados

Creando nuestro propio framework

BDD

CI/CD

Conclusion del curso