bb101

Basic information:

bb101 — is a wrapper module over Puppeteer, its role is to organize the logic of interaction with pages through the tracks that you assign to the page when you update it or any other change that is presented in the official documentation, the module does not reduce the possibilities of puppeteer

Get started

Start browser: constructor BB101

Add new page: addPage

Delete page: deletePage

Load url page: loadPage

Go to url page: gotoPage

Save content page: savePage

Emulate device: emulatePage

Event handler: on

Event handler for trace: onTrace

Code loader: sendConsole

Updater trace: setTrace

Getter trace: getTrace

Installation context: context

Middleware: use

constructor BB101

If necessary, the browser is created and opened, you can specify all the necessary parameters from the official documentation in the object

const bb101 = new require('bb101')({
    headless: false
    /* option launch */
})
 
bb101.then(async bb => {
    //...
})

And also any parameter which you pass at creation of the page can be stored by default in object for example it is possible to establish Viewport or emulate and other.. by default for all pages

• width (int) - if these parameters are set properly, setViewport will work
• height (int) - if these parameters are set properly, setViewport will work
• id - The ID will be set only for the first page
• emulate - Specify the device model the full list can be found in the official documentation
• trace - The beginning of the path for all pages
• url - The default link
• load (boolean) - The page will be loaded immediately after creation if true and it will not be processed via on or on Trace

addPage

You can add pages at once or separately below will present all ways to add, not all the parameters can be set in the page designer, but you can install them in the handler

this example creates and loads a page

bb.addPage('id', {
    url: 'https://yandex.ru',
    load: true,
    /*
    width: 1024,
    hieght: 654,
    emulate: 'iPhone 6',
    trace: 'home page yandex',
    */
})

example of creating one or more pages by passing an object, note the id of the last page is used by many other methods as the default id if the parmeter is not specified

bb.addPage({
    id: 'yandex', 
    url: 'https://yandex.ru',
    emulate: 'iPhone 6',
    trace: 'home page yandex mobile',
    /*
    load: true,
    width: 1024,
    hieght: 654,
    */
}, {
    id:'google', 
    url: 'https://google.com',
    emulate: 'iPhone 6',
    trace: 'home page google mobile',
    /*
    load: true,
    width: 1024,
    hieght: 654,
    */
})
 

deletePage

You can delete only the created and loaded page here are examples

bb.deletePage() // delete this page, last page created (if id has not changed)
 
bb.deletePage('id') // id
 
bb.deletePage('id', 'id') // ids
 
bb.deletePage({}) // delete all pages

loadPage

loadPage differs from gotoPage only in that it uses the already set url when creating a page or pulls out the default url, you can use loadPage as a page reload tool, examples of use

bb.loadPage() // load this page, last page created (if id has not changed)
 
bb.loadPage({}) // load all pages
 
bb.loadPage('id') // id
 
bb.loadPage('id', 'id2') // ids

Adding objects to the load queue allows you to change the page's trace property before loading, the id may not be specified, the last id in the object will be used

bb.loadPage({
    id: 'id',
    trace: 'load page'
}, {
    id: 'id2',
    trace: 'load page id 2'
}) // objects

gotoPage

A little advanced loadPage features, examples

bb.gotoPage('https://facebook.com')
bb.gotoPage('https://facebook.com', 'goto facebook')
 
bb.gotoPage('google', 'https://google.com/mail', 'to mail')

Adding objects to the queue, id and trace may not be specified, the last id in the object will be used

bb.gotoPage({
    id: 'google',
    url: 'https://yandex.ru',
    trace: 'to yandex'
}, {
    id: 'yandex',
    url: 'https://google.com',
    trace: 'to google'
})

savePage

I decided to add this property because some pages in headless mode: true are not loaded at all as in headless mode: false in this case, the page cannot find the needed selector, this method saves the page content after loading in html file, examples

bb.savePage() // you can not specify the parameters then the last loaded page will be saved, and its name will be trace
 
bb.savePage(`${__dirname}/page.html`) // the file will be saved in this path
 
bb.savePage('id', 'path') // standart

or through the object, if the id is not specified by the parameter, the last id will be used

await bb.savePage({
    id: 'google',
    path: `${__dirname}/google.html`
}, {
    id: 'yandex',
    path: `${__dirname}/yandex.html`
})

emulatePage

This method allows you to emulate the device, ask him the page, after the emulation of the device the page will be reloaded so you need to set trace examples

bb.emulatePage('iPhone 6') // the last page id will be used
 
bb.emulatePage('google', 'iPhone 6') // id is set explicitly
 
bb.emulatePage('google', 'iPhone 6', 'google to mobile') // the best 

or through the object, if the id is not specified by the parameter, the last id will be used

bb.emulatePage({
    id: 'google',
    emulate: 'iPhone 6',
    trace: 'to google mobile'
}, {
    id: 'yandex', // default: this id
    emulate: 'iPhone 6', // dafault: 'iPhone 6'
    trace: 'to yandex mobile'
})

on

handles one or more events specified as an array, see all events here

from 1 to 3 arguments are passed to the on function

• first scheme (arguments)
  • id - id of the page to which you want to hang the handler or {} - to hang the handler on all pages, default: this id
  • event - event or array events, default: 'load'
  • callback - function callback, default: (ctx) => console.log(ctx.trace)

  bb.on(id, event, callback)    
  //example
  bb.on('google', ['load', 'console'], async ctx => {
      console.log(ctx.trace)
  })

• last scheme (objects)
  • id - id of the page to which you want to hang the handler or {} - to hang the handler on all pages, default: this id
  • event - event or array events, default: 'load'
  • callback - function callback, default: (ctx) => console.log(ctx.trace)

  bb.on({ id, event, callback })
  //example
  bb.on({
      id: 'google',
      event: ['load', 'console'],
      callback: async ctx => {
          console.log('google: ' + ctx.url)
      }
  }, {
      id: 'yandex',
      event: 'load',
      callback: async ctx => {
          console.log('yandex: ' + ctx.url)
      }
  })

In callback passed a very important context from it you can get all the data of the page, and then modify it through the methods built into puppeteer and bb101

 // start trace load is "google"
 bb.on('yahoo', 'load', async ctx => {
    if (ctx.trace == 'yahoo') {
        ctx.setTrace('search yahoo')
    await ctx.page.evaluate(`
        document.querySelector('input[id="uh-search-box"]').value = 'bb101'
        document.querySelector('button[id="uh-search-button"]').click()
    `)
    }
 
    if (ctx.trace == 'search yahoo') {
        await ctx.page.screenshot({ path: `${__dirname}/search.png`, fullPage: true })
        console.log('screenshot page')
    }
 })
 

onTrace

onTrade is more concentrated on the stream analogue on except the main arguments added to it the fourth argument cuts off all unnecessary trace

from 1 to 4 arguments are passed to the on function

• first scheme (arguments)
  • id - id of the page to which you want to hang the handler or {} - to hang the handler on all pages, default: this id
  • trace - regular expression for catching a message, default: /.+/
  • event - event or array events, default: 'load'
  • callback - function callback, default: (ctx) => console.log(ctx.trace)

  bb.on(id, trace, event, callback)   
  //example
  bb.on('google', /(start|end|google)/, ['load', 'console'], async ctx => {
      console.log(ctx.trace)
  })

• last scheme (objects)
  • id - id of the page to which you want to hang the handler or {} - to hang the handler on all pages, default: this id
  • trace - regular expression for catching a message, default: /.+/
  • event - event or array events, default: 'load'
  • callback - function callback, default: (ctx) => console.log(ctx.trace)

  bb.on({ id, event, callback })    
  //example
  bb.on({
      id: 'google',
      trace: /.+/,
      event: ['load', 'console'],
      callback: async ctx => {
          console.log('google: ' + ctx.url)
      }
  }, {
      id: 'yandex',
      trace: /.+/,
      event: 'load',
      callback: async ctx => {
          console.log('yandex: ' + ctx.url)
      }
  })

sendConsole

method for passing code to the page console

bb.sendConsole(`document.write("JSus")`) // uses the last page loaded or the last id
 
bb.sendConsole('google', `document.write("JSus")`) // the best

or through the object, if the id is not specified by the parameter, the last id will be used

bb.sendConsole({
    id: 'google',
    eval: `document.write("JSus")`
}, {
    id: 'yandex',
    eval: `document.write("JSus")`
})

setTrace

The method allows you to "manually" set the trace page or pages attention this method does not return a promise, it's synchronous

bb.setTrace('go to ..') // uses the last page loaded or the last id
 
bb.setTrace('google', 'go to ..') // the best

or through the object, if the id is not specified by the parameter, the last id will be used

bb.setTrace({
    id: 'google',
    trace: 'to mail'
}, {
    id: 'yandex',
    trace: 'to image'
})

getTrace

The method allows you to get a trace of a page or multiple pages attention this method does not return a promise, it's synchronous

'trace' <= bb.getTrace() // uses the last page loaded or the last id
 
'trace' <= bb.getTrace('google') // the best
 
['trace', 'trace2'] <= bb.getTrace('google', 'yandex') // ids
 
['trace', 'trace2'] <= bb.getTrace({}) // all
 
['trace', 'trace2'] <= bb.getTrace({ id: 'google' }, { id: 'yandex' })

context

this method allows you to set the context and use it from any part of the application

bb.context({
    pass: '1323',
    login: 'JSus'
    data: {
        //...
    }
})

use

Middleware is able to work only with synchronous operations, each event starts the callback function and allows you to completely change the context

bb.use((ctx, next) => { if (ctx.trace == 'yandex') { ctx.context.count_yandex_reload = ctx.context.count_yandex_reload + 1 || 0
} return next(); })

Examples

Google auth and screnshoting message

Mini example

Search in Yahoo

const BB101 = require('bb101')
 
const bb101 = new BB101({
    headless: false
})
 
 
bb101.then(async bb => {
 
    await bb.addPage({ 
        id: 'yahoo', 
        url: 'https://yahoo.com',
        trace: 'yahoo',
    })
 
    bb.on('yahoo', 'load', async ctx => {
        if (ctx.trace == 'yahoo') {
            
            ctx.setTrace('search yahoo')
 
            await ctx.page.evaluate(`
                document.querySelector('input[id="uh-search-box"]').value = 'bb101'
                document.querySelector('button[id="uh-search-button"]').click()
            `)
        }
        if (ctx.trace == 'search yahoo') {
            console.log(ctx.trace )
            await ctx.page.screenshot({ path: `${__dirname}/search.png`, fullPage: true })
            console.log('screenshot')
        }
 
    })
 
    bb.loadPage('yahoo')
})

Contacts

my telegram: @JSusDev, channel https://t.me/Jsusdevs

if you have any questions and suggestions please email me in telegram if you find bugs I will be very grateful if you also let me know

bb101 by JSus