@syncmarket/browser-facade

Importar

import { App, PageProcessor, Runner } from '@syncmarket/browser-facade'

Uso

Primero vamos a crear una clase que será la encargada de realizar el proceso de scrapeo y las operaciones necesarias que se pueda requerir tales como:

• Persistencia/Lectura en Base de Datos
• Consumo de información de alguna Api
• Lectura/Escritura en sistemas de archivos.

Esta clase debe extender de Runner que es la que contiene los métodos necesarios para el proceso de scrapping.

class ScrapperExample extends Runner<ExampleProcessor> {
  async beforeRun(): Promise<void> {
    this.logger.info('Before run');
  }

  async afterRun(): Promise<void> {
    this.logger.info('After run');
  }

  async run(): Promise<void> {
    try {
      const pageProcessor = await this.process('https://sync-market.netlify.app/')
      const data = await pageProcessor.getData()

      console.log(data)

    } catch (error: any) {
      this.logger.error(error.message);
    }
  }

  async makeResponseProcessor(data: unknown): Promise<ExampleProcessor> {
    return new ExampleProcessor(data);
  }
}

Para la manipulación del dom, vamos a crear otra clase que será la encargada de procesar los datos, transformarlos, limpiarlo etc.

Esta clase debe heredar de PageProcessor y recibe como parametro en su constructor la pagina, aqui es donde vamos a definir todas las acciones que se pueden realizar dentro de la pagina. Por ejemplo:

• Obtener datos
• Rellenar un formulario
• Click sobre algun boton
• Etc.

class ExampleProcessor extends PageProcessor {
  async getData(): Promise<any> {
    const data = await this.page.getTextContent(selectors.title)
    const [title, description] = data.split('\n')

    return { title, description: description.trim() }
  }

  async fillForm(data: any): Promise<any> {
    // do stuff
  }
}

Por ùltimo creamos la instancia de la app, esté será la encargada de iniciarlizar todo. Este recibe algunas configuraciones obligatorias

executablePath: La ruta completa del navegador chrome

const app = new App({
  client: {
    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
  }
})

const scrapper = new ScrapperExample(app)

await scrapper.start()

Código completo.

import { App, Runner, PageProcessor } from '@syncmarket/browser-facade'

const selectors = {
  title: 'h1'
}

class ExampleProcessor extends PageProcessor {
  async getData(): Promise<any> {
    const data = await this.page.getTextContent(selectors.title)
    const [title, description] = data.split('\n')

    return { title, description: description.trim() }
  }
}

class ScrapperExample extends Runner<ExampleProcessor> {
  async beforeRun(): Promise<void> {
    this.logger.info('Before run');
  }

  async afterRun(): Promise<void> {
    this.logger.info('After run');
  }

  async run(): Promise<void> {
    try {
      const pageProcessor = await this.process('https://sync-market.netlify.app/')
      const data = await pageProcessor.getData()

      console.log(data)

    } catch (error: any) {
      this.logger.error(error.message);
    }
  }

  async makeResponseProcessor(data: unknown): Promise<ExampleProcessor> {
    return new ExampleProcessor(data);
  }
}

const app = new App({
  client: {
    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
  }
})

const scrapper = new ScrapperExample(app)

await scrapper.start()

Probando la app.

bun index.ts

8:24:16 PM [INFO]: Before run
{
  title: "SyncMarket",
  description: "Automatiza tus Publicaciones en Facebook Marketplace con Nuestro Bot",
}
8:24:25 PM [INFO]: After run