Puppeteer--API

 
一、获取元素信息
在页面内执行 document.querySelector。
 
在页面内执行 document.querySelectorAll。
 
解析指定的XPath表达式。
 
在页面内执行 Array.from(document.querySelectorAll(selector))，然后把匹配到的元素数组作为第一个参数传给 pageFunction。
//计算div的个数
const divsCounts = await page.$$eval('div', divs => divs.length);
 
在页面内执行 document.querySelector，然后把匹配到的元素作为第一个参数传给pageFunction。
//示例
const searchValue = await page.$eval('#search', el => el.value);
const preloadHref = await page.$eval('link[rel=preload]', el => el.href);
const html = await page.$eval('.main-container', e => e.outerHTML);
 
执行脚本
//示例
const bodyHandle = await page.$('body');
const html = await page.evaluate(body => body.innerHTML, bodyHandle);
await bodyHandle.dispose();
 
此方法和 page.evaluate 的唯一区别是此方法返回的是页内类型(JSHandle)
const aHandle = await page.evaluateHandle(() => document.body);
const resultHandle = await page.evaluateHandle(body => body.innerHTML, aHandle);
console.log(await resultHandle.jsonValue());
await resultHandle.dispose();
 
在所属页面的任意 script 执行之前被调用。常用于修改页面js环境
// preload.js
// 重写 `languages` 属性，使其用一个新的get方法
Object.defineProperty(navigator, "languages", {
  get: function() {
    return ["en-US", "en", "bn"];
  }
});
 
// 假设 preload.js 和当前的代码在同一个目录
const preloadFile = fs.readFileSync('./preload.js', 'utf8');
await page.evaluateOnNewDocument(preloadFile);
 
//示例
const handle = await page.evaluateHandle(() => ({window, document}));
const properties = await handle.getProperties();
const windowHandle = properties.get('window');
const documentHandle = properties.get('document');
await handle.dispose();
 
二、模拟用户操作
1.Page类
找到一个匹配 selector 选择器的元素，如果需要会把此元素滚动到可视，然后通过 page.mouse 点击它。
要注意如果 click() 触发了一个跳转，会有一个独立的 page.waitForNavigation() Promise对象需要等待。 正确的等待点击后的跳转是这样的：
const [response] = await Promise.all([
　　page.waitForNavigation(waitOptions),
　　page.click(selector, clickOptions),
]);
 
找到一个匹配selector的元素，并且把焦点给它
 
找到一个匹配的元素，如果需要会把此元素滚动到可视，然后通过 page.mouse 来hover到元素的中间。
 
当提供的下拉选择器完成选中后，触发change和input事件
page.select('select#colors', 'blue'); // 单选择器
page.select('select#colors', 'red', 'green', 'blue'); // 多选择器
 
每个字符输入后都会触发 keydown, keypress/input 和 keyup 事件
要点击特殊按键，比如 Control 或 ArrowDown，用 keyboard.press
page.type('#mytextarea', 'Hello'); // 立即输入
page.type('#mytextarea', 'World', {delay: 100}); // 输入变慢，像一个用户
 
2.Mouse类
每个 page 对象都有它自己的 Mouse 对象，使用见 page.mouse。
// 使用 ‘page.mouse’ 追踪 100x100 的矩形。
await page.mouse.move(0, 0);
await page.mouse.down();
await page.mouse.move(0, 100);
await page.mouse.move(100, 100);
await page.mouse.move(100, 0);
await page.mouse.move(0, 0);
await page.mouse.up();
 
3.Keyboard类
 
按下 Shift 来选择一些字符串并且删除的例子:
await page.keyboard.type('Hello World!');
await page.keyboard.press('ArrowLeft');
 
await page.keyboard.down('Shift');
for (let i = 0; i < ' World'.length; i++)
　　await page.keyboard.press('ArrowLeft');
await page.keyboard.up('Shift');
 
await page.keyboard.press('Backspace');
// 结果字符串最终为 'Hello!'
按下 A 的例子:
await page.keyboard.down('Shift');
await page.keyboard.press('KeyA');
await page.keyboard.up('Shift');
 
三、选择器语法
1.Document.querySelector()
格式:element = parentNode.querySelector(selectors);
 
2.Document.querySelectorAll()
格式：elementList = parentNode.querySelectorAll(selectors);
 
获取文档中所有<p>元素的NodeList。
获取文档中类名为 "myclass" 的元素的NodeList。
var matches = document.querySelectorAll("p");
var el = document.querySelector(".myclass");
 
获取文档中所有class包含"note"或"alert"的<div>元素的列表，：
var matches = document.querySelectorAll("div.note, div.alert");
 
获取ID为"test"的容器内，其直接父元素是一个class为"highlighted"的div的所有<p>元素的列表。
var container = document.querySelector("#test"); var matches = container.querySelectorAll("div.highlighted > p");
 
获取class为"select"的容器内，其祖先元素是一个class为"outer"的下的所有class为“inner"的元素列表。(这里即使outer不在select内，inner也会被找到)
var select = document.querySelector('.select'); var inner = select.querySelectorAll('.outer .inner');
 
获取文档中属性名为"data-src"的iframe元素列表：
var matches = document.querySelectorAll("iframe[data-src]");
 
获取列表后，再找匹配项
var highlightedItems = userList.querySelectorAll(".highlighted");
highlightedItems.forEach(function(userItem)
　　{ deleteUser(userItem);
});
 
四、使用示例
1.获取所有链接的href、title信息
await page.goto('https://segmentfault.com/news/frontend')

var SfFeArticleList = await page.evaluate(() => {
    var list = [...document.querySelectorAll('.news__list .news__item-title a')]
    return list.map(el => {
        return {
　　　　　　　href: el.href.trim(), 
           title: el.innerText
   }
    })
})
 
2.获取属性为某个值的元素
var login = await page.$('.login')
await login.click()

var loginPhoneOrEmail = await page.$('[name=loginPhoneOrEmail]')
await loginPhoneOrEmail.click()
await page.type('123456789@163.com', {delay: 20})

var password = await page.$('[placeholder=请输入密码]')
await password.click()
await page.type('123456', {delay: 20})

var authLogin = await page.$('.panel .btn')
await authLogin.click()
 
3.获取符合条件的元素，再过滤，并点击
await page.evaluate(() => {
          let li = [...document.querySelectorAll('.category-list-box .category-list .item')]
          li.forEach(el => {
              if (el.innerText == '前端')
                  el.click()
          })
      })

var submitBtn = await page.$('.submit-btn')
await submitBtn.click()
 
4.找到元素
  const result = await page.evaluate(() => {
    let $ = window.$;
    let nodeItems = $('.list-wp a');
    let links = [];
    
    /* 获取对应的元素节点 */
    if(nodeItems.length >= 1) {
      nodeItems.each((index, item) => {
        let elem = $(item);
        let movieId = elem.find('div').data('id');
        let title = elem.find('.title').text();
        let rate = Number(elem.find('.rate').text());
        let poster = elem.find('img').attr('src').replace('s_ratio_poster','l_ratio_poster');

        links.push({
          movieId,
          title,
          rate,
          poster,
        })
      })
    }

    return links;
  });

 

 

posted @ 2021-01-18 22:10  盲仔不瞎忙  阅读(1191)  评论(0)  编辑  收藏  举报