puppeteer-testkit
v0.4.5-alpha.17
Published
A toolkit for DOM & BOM operation with puppeteer in nodejs environment, which greatly improves test case development efficiency
Downloads
2
Maintainers
Readme
puppeteer-testkit
A toolkit for DOM operation with puppeteer in nodejs environment, which greatly improves test case development efficiency
Why
I got tired of writing so many callbacks for DOM operations with puppeteer api.
Installation
npm install puppeteer-testkit --save-dev
This project already contains typings files, just enjoy programing with TypeScript
Usage
import puppeteer from 'puppeteer'
import $ from 'puppeteer-testkit'
(async ()=>{
let browser = await puppeteer.launch()
// puppeteer-testkit would init with browser and set the default page to be the current page.
await $.setBrowser(await browser.pages())
const $body = $('body')
if(await $body.hasClass('some-class')){
const id = await $body.find('.item:eq(0)').attr('id')
}
...
})();
Except some event trigger and some methods, most of DOM api are based on zeptojs, which would be injected when page on load.
What's different from zepto.js
is that, puppeteer-testkit
only supports getting data from dom but not setting data to dom or changing dom.
In chromium page, it was modified for puppeteer-testkit
and exposes $Z
namespace.
Methods return instance of VSelector
has
, not
, parents
, parent
, children
, siblings
, prev
, next
, find
, eq
, first
, last
jQuery CSS extensions is supported, such as $('div:first') and el.is(':visible').
const body: VSelector = $('body')
const header: VSelector = body.find('header')
const li1: VSelector = header.find('li').eq(1)
const ul: VSelector = li1.parents('ul:visible')
The instance of VSelector do nothing with document
Methods return Promise<string | number | boolean | any>
text
, html
, height
, width
, offset
, offsetParent
, position
, val
, index
, scrollTop
, css
, attr
, prop
, data
, is
, hasClass
All above methods can be used for test cases under waitFor
and expect
VSelector.waitFor.X(name?, expectedValue?, options?:{timeout: 1000, delay: 100}):Promise<void>
By default, it checks to be the expected value every 100ms and it would throw TimeoutError
if failed to get the expected value after 1000ms
await $('div.loading').waitFor.hasClass('hidden')
await $('div.dialog').waitFor.css('display', 'block', {
timeout: 3000,
delay: 1000
})
VSelector.expect.X(name?, expectValue?):Promise<void>
It checks the value immediately, and throw ExpectError
if failed to get the expected value
await $('div.loading').expect.hasClass('hidden')
await $('div.dialog').expect.css('display', 'block')
Event Triggers
All event triggers are based on api of puppeteer and do some functional packaging
VSelector.click(options?): Promise<void>
Enhanced click function, supports continuous click for some expected result.
options
{
x: 10, // click on element offset left
y: 10, // click on element offset top
forShow?: string | forHidden?: string | forDispose?: string | forExist?: string | forTarget?: string | until?: () => true // checking options, selector or sub string of url or function
// should not be more than one of checking options
// the below options could work, only if had one of above checking options
timeout: 10000, // timeout
timespan: 1000, // time span between two click
delay: 100, // delay of checking expected result after click
closeTarget: true // work with forTarget, close target when the target is open
}
VSelector.input(content: string, autoBlur: boolean = true): Promise<void>
- clear the old value of element
- type the new value to the element
- blur the element by default
VSelector.type(content: string): Promise<void>
VSelector.type == Puppeteer.Page.type
VSelector.focus(): Promise<void>
VSelector.focus == Puppeteer.Page.focus
Some helpful tool methods
reload(options?: NavigationOptions): Promise<Response>
findTarget(targetUrlSubstr: string): Promise<Target>
closeTarget(targetUrlSubstr: string): Promise<Target>
blur(): Promise<void>
setBrowser(browser: Browser): Promise<void>
setCurrentPage(page: Page): Promise<void>
page: Page
// current page object
browser: Browser
// current browser object
Constants
UNDEFINED
, NULL
, EMPTY
, NOT_EMPTY
await $('div.dialog').waitFor.attr('id', $.constants.NOT_EMPTY)
puppeteer-testkit
is being revised and updated periodically
Welcome to be a contributor to this project
License
Licensed under MIT