puppeteer自動化測試

時間 2019-11-25

原文原文鏈接

一、基礎知識

puppeteer.launch() 建立瀏覽器實例
puppeteer.newPage() 建立一個新頁面
puppeteer.goto() 進入指定網站
page.screenshot() 截屏
page.pdf() 輸出爲pdf 注意必須是headless=true
page.evaluate() 在瀏覽器中執行函數想到與在控制檯執行函數返回promise
page.waitFor(selectorOrFunctionOrTimeout[, options[, ...args]]) 等待能夠是等待一段時間，某個函數執行或某個DOM的出現
page.click(selector[, options]) 點擊某個元素
page.type(selector, text[, options]) 文本輸入
page.frames() 獲取當前頁面全部的 iframe，而後根據 iframe 的名字精確獲取某個想要的 iframe
iframe.$(‘.srchsongst‘) 獲取 iframe 中的某個元素
iframe.evaluate() 在瀏覽器中執行函數，至關於在控制檯中執行函數，返回一個 Promise
Array.from 將類數組對象轉化爲對象
iframe.$eval() 至關於在 iframe 中運行 document.queryselector 獲取指定元素，並將其做爲第一個參數傳遞
iframe.$$eval 至關於在 iframe 中運行 document.querySelectorAll 獲取指定元素數組，並將其做爲第一個參數傳遞
page.emulate() 指定設備node

二、配置文件

jest.config.js
module.exports = {

    preset: 'jest-puppeteer', //調用preset
    // globals: _.assign({}, config.get('e2e'), { //這裏能夠注入全局變量
    //     ENV_URL: config.get('baseUrl')
    // }),
    testMatch: ['**/test/*.test.js?(x)'] //指定須要進行測試的文件
}

jest-puppeteer.config.js
const port = process.env.TEST_SERVER_PORT ?
    Number(process.env.TEST_SERVER_PORT) :
    4444

    // console.log(port)

process.env.TEST_SERVER_PORT = port

module.exports = {

　　　　exitOnPageError: false,//false忽略錯誤,true捕獲錯誤(default)

    launch: {
        headless: process.env.CI === 'true',
    },
    browserContext: process.env.INCOGNITO ? 'incognito' : 'default',
    server: {
        command: `cross-env PORT=${port} node test`,
        port,
        launchTimeout: 100000,
    },
}

命令行 npm run test
 "test": "cross-env INCOGNITO=true jest -c jest.config.js --notify --detectOpenHandles",

三、服務文件/test/index.js(static即測試文件)

const path = require('path')
const express = require('express')

const app = express()

app.use(express.static(path.join(__dirname, 'static')))
console.log(process.env.PORT)

app.listen(process.env.PORT)