Hacer un E2E

Clase 16 de 24 • Curso Avanzado de Automatización de Pruebas con Puppeteer

Hernan Camilo Jimenez Garcia

student•

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

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]" 

        }

Randy Guerra

student•

Esta clase, requiere mucha atencion.

Irving Juárez

student•

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

teacher•

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

student•

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

 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?

Gustavo Cortes

student•

Como se hace para buscar en la consola de chrome ?

Giselle Katherin Castillo Ariza

student•

te paras en la consola y con ctrl+f

David steven Abril Pulecio

student•

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