3

Estoy escribiendo unas pruebas en una página de un juego para un par de pruebas automatizadas. Estoy usando puppeteer y typescript. Tengo un problema en la función login() pues las instrucciones que están definidas, cuando llega al login, aún no están definidas

(node:16244) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'waitFor' of undefined

Este es mi index.ts

import CorePuppeteer from './core/puppeteer.core';
import { Credentials } from './interfaces/interface';

// Parámetros
const url  = 'https://lobby.ogame.gameforge.com/es_ES/';
// Aquí se instancia un objeto, y el constructor se encarga de crear lo necesario para empezar a trabar
const core = new CorePuppeteer( url, false );
const credentials: Credentials = {
    email: '[email protected]',
    password: 'foobar'
};

// Invocación de funciones
( async () => {
    // aquí salta el error
    await core.login( credentials );
})();

Este es el código de puppeteer.core.ts

import puppet from 'puppeteer';
import { Credentials } from '../interfaces/interface';
export default class CorePuppeteer {

    // public browser: puppet.Browser;
    // public page: puppet.Page;
    public browser: any;
    public page: any;
    public delay = 100;

    constructor( url: string, headless = true ) {
        ( async () => {
            this.browser = await puppet.launch( { headless } );
            this.page    = await this.browser.newPage();

            await this.page.setViewport({ width: 1366, height: 768});
            await this.page.goto( url, { waitUntil: 'networkidle2' } );
        })();
    }

    
    async login( credentials: Credentials ) {
        const inputEmail = 'input[name="email"]';
        const inputPass  = 'input[name="password"]';
        const button     = 'button[type="submit"]';

        await this.page.waitFor( inputEmail );
        await this.page.type( inputEmail, credentials.email, { delay: this.delay } );
        await this.page.type( inputPass, credentials.password, { delay: this.delay } );

        await this.page.click( button );
    }
}

¿Qué puedo hacer para esperar a que el constructor termine de setear todas las variables, antes que se invoque la siguiente función login?

1 respuesta 1

3

El problema es que un constructor no puede asíncrono por definición. Por mucho que invoques una IIFE en él mismo, la instancia se resuelve (se construye) antes de que la Promise de la IIFE se resuelva.
Eso da paso al error que te encuentras, y es que tienes la instancia de CorePupeeter antes y su propiedad page se inicializa después.

Como el constructor no es asíncrono, deberemos crear un método async que sepa resolver instancias de CorePupeeter de forma asíncrona, dejando el constructor privado (para evitar este error) y ese método estático.

Voy a simplificar la clase por el bien del ejemplo.

export default class CorePuppeteer {

    public browser: any;
    public page: any;
    public delay = 100;

    // Ahora ya no necesitamos los parámetros del constructor
    // porque sólo los usamos en el método create(...)
    // El constructor, además, será privado para NO permitir
    // crear instancias de esta clase sin usar el método create(...)
    private constructor() { }

    // El método static create(...) va a resolver instancias
    // de CorePupeeter de forma asíncrona
    static async create(url: string, headless = true): Promise<CorePuppeteer> {
        const core = new CorePuppeteer();
        core.browser = await puppet.launch( { headless } );
        core.page    = await core.browser.newPage();

        await core.page.setViewport({ width: 1366, height: 768});
        await core.page.goto( url, { waitUntil: 'networkidle2' } );

        return core;
    }

    async login( credentials: Credentials ) {
        // ...
    }
}

El trabajo asíncrono se delega al mismo método create para que podamos "esperar" a que la nueva instancia de CorePupeeter esté lista y con todas sus propiedades inicializadas.

Lo usaríamos del siguiente modo

// Parámetros
const url  = 'https://lobby.ogame.gameforge.com/es_ES/';
const credentials: Credentials = {
    email: '[email protected]',
    password: 'foobar'
};

(async () => {
    // Esperamos la resolución
    const core = await CorePuppeteer.create(url, false);
    // En este punto, page ya está inicializado
    await core.login( credentials );
})();

Espero que sirva.

5
  • No exactamente, las arrow function no tiene un contexto this a diferencia de las funciones definidas con la keyword function. Te dejo este ejemplo en JS (porque no sé cómo compartir un snippet de código con Typescript playground, jaja). Pero bueno, es aplicable igual.
    – VRoxa
    Commented el 13 jun. 2020 a las 4:06
  • No entiendo muy bien qué quieres decir, @Riven. Pero this en la IIFE del constructor hace referencia a la instancia, así que ese no era el problema del OP. En cualquier caso, esperemos que responda a ver si era lo que yo creo que era, un tema de asincronicidad... Así saldremos de dudas.
    – VRoxa
    Commented el 13 jun. 2020 a las 4:10
  • El ejemplo que te he compartido es análogo a lo que tú comentas, @Riven. No es lo mismo un contexto que un scope, no hay que mezclarlo. Un contexto implica siempre un scope, pero un scope no implica un contexto nuevo, como es el caso de las arrow functions que implican un scope, pero no un contexto. Eso de "functiones autoejecutables" es lo que yo estoy mencionando como IIFE. Por último, los paréntesis no implican un scope nuevo.
    – VRoxa
    Commented el 13 jun. 2020 a las 4:20
  • Tienes toda la razon amigo mio, al parecer aquello fiable que habia visto no es correcto, pues hice una investigacion mas a profundidad en el codigo para comprobar si ambos apuntaban a la misma parte y es cierto, ambos apuntan a la instancia de la clase, por lo que no hay nuevo scope, efectivamente el probema es solo de que await no puede ser usado en el constructor y no de los scopes ni contextos, (no es que pensara que una funcion flecha tenia contexto), mas bien pense que por alguna razon la funcion flecha hacia referencia a el contexto de los parentesis el cual comprobado que no existe.
    – Layer
    Commented el 13 jun. 2020 a las 4:38
  • Es que al probar esto obtuve resultados muy extraños la primera vez que lo hice.
    – Layer
    Commented el 13 jun. 2020 a las 4:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.