puppeteer自动化测试系列之 五---常见问题

模块导入示例

page.js

async function login(page, username, password) {
await page.waitFor('input[id=userId]');
await page.type('input[id=userId]', username);
await page.type('input[id=password]', password);
await page.click('button[type="submit"]');
await page.waitFor('p.success-msg');
}
module.exports = { login }

 

test.js

async function login(page, username, password) {
await page.waitFor('input[id=userId]');
await page.type('input[id=userId]', username);
await page.type('input[id=password]', password);
await page.click('button[type="submit"]');
await page.waitFor('p.success-msg');
}
module.exports = { login }

 

拖拽示例

const e = await page.$('#searchResultsSidebar');
const box = await e.boundingBox();
await page.mouse.move(box.x + box.width / 2, box.y + boy.height / 2);
await page.mouse.down();
await page.mouse.move(100, 200); // move to (100, 200) coordinates
await page.mouse.up();

　　

xpath定位

const e = await page.$('#searchResultsSidebar');
const box = await e.boundingBox();
await page.mouse.move(box.x + box.width / 2, box.y + boy.height / 2);
await page.mouse.down();
await page.mouse.move(100, 200); // move to (100, 200) coordinates
await page.mouse.up();

 

获取xpath表达式对应元素文本

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://example.com/');

const title = await page.$x("//h1");
let text = await page.evaluate(h1 => h1.textContent, title[0]);
console.log(text)

await browser.close();

 

双击

await page.click('.link-page-wrap',{ clickCount: 2 });

const foo = await page.$('.foo-item');
await = foo.click();
await = foo.click({ clickCount: 2 });

 

下载chromium

const browserFetcher = puppeteer.createBrowserFetcher();
const revisionInfo = await browserFetcher.download('533271');
const browser = await puppeteer.launch({executablePath: revisionInfo.executablePath})

 

显示影藏的元素

await page.evaluate(() => { document.querySelector('mySelector').style.display = 'yes'; });

 

清空文本值

const puppeteer = require('puppeteer');


;(async () => {
const browser = await puppeteer.launch({headless: false})
const page = await browser.newPage()
await page.goto('https://archive.kbb1.com/lessons', {waitUntil: 'networkidle2'});
// Clicking on Date filter
// Click Apply and check if filter tag is created
await Promise.all([
await page.click(".ui.blue.large.pointing.secondary.index-filters.menu div a:nth-child(4)"),
page.waitForSelector("div.five.wide.column > div.ui.grid > div:nth-child(2) > div:nth-child(2) > div > input")
]);


await page.$eval("div.five.wide.column > div.ui.grid > div:nth-child(2) > div:nth-child(1) > div > input[type=\"text\"]", (selector) => {
selector.value = "";
});
await page.$eval(".class", (selector) => {
selector.value = "";
});
})()

 

获取某一个节点的某个属性

const searchValue = await page.$eval('#search', el => el.value);
const preloadHref = await page.$eval('link[rel=preload]', el => el.href);
const text = await page.$eval('.text', el => el.textContent);
const html = await page.$eval('.main-container', e => e.outerHTML);

 

获取某一类节点的某个属性集合

const textArray = await page.$$eval('.text', els => Array.from(els).map(el=> el.textContent));

 

beforall和afterall

beforeAll(async () => {
browser = await puppeteer.launch({
headless: false,
slowMo: 80
});
page = await browser.newPage();
});


afterAll(()=> {
browser.close();
});

 

 Jest 断言

       Matchers俗称断言库，例如上面的expect().toBe()便是其中之一，其他常见用法如下：

 

1.相等断言

　　toBe(value)： 比较数字、字符串

　　toEqual(value)： 比较对象、数组

　　toBeNull()

　　toBeUndefined()

 

 2.包含断言

　　toHaveProperty(keyPath, value)： 是否有对应的属性

　　toContain(item)： 是否包含对应的值，括号里写上数组、字符串

　　toMatch(regexpOrString)： 括号里写上正则

 

3.逻辑断言

　　 toBeTruthy()

　　 toBeFalsy()

　　 在JavaScript中，有六个falsy值：false，0，''，null， undefined，和NaN。其他一切都是Truthy。

 

toBeGreaterThan(number)： 大于

 toBeLessThan(number)： 小于

 

4.not 取反，用法见下面例子

js去掉字符串的空格回车换行

例如下面这个json串，中间的\n表示换行

var str = "{' retmsg':'success ',\n' trans_date':' 20170906'}";
console.log(str);
//"{' retmsg':'success ',
//' trans_date':' 20170906'}"

 

去掉空格

str = str.replace(/\ +/g,"");
console.log(str);
//"{'retmsg':'success',
//'trans_date':'20170906'}"

 

去掉回车换行

str = str.replace(/[\r\n]/g,"");
console.log(str);
//"{'retmsg':'success','trans_date':'20170906'}"