怎样获取SPA单页应用的文本内容？

Question

在浏览器控制台使用

var web_txt = document.documentElement.innerText;
web_text;  //web_text为当前网页的文本内容

web_text为当前网页的文本内容，即使是SPA单页应用也可以获取，但是如果在油猴脚本或者扩展程序里面使用var web_txt = document.documentElement.innerText;，获取的就是页面的源代码，不是渲染后的文本内容，想要获取 SPA 应用的渲染后的文本该怎么做？

Answer 1

可以考虑以某个内容为标志物，不断循环检查页面内容，直到标志物出现。然后再去获取 innerText 作为页面内容。

Answer 2

不知道你用的什么脚本，以puppeteer为例，大概的代码如下：

'use strict';

import {Page} from 'puppeteer';

const puppeteer = require('puppeteer');
const fs = require('fs').promises;


(async () => {
  // 初始化
  const browser = await puppeteer.launch({ headless: false,  devtools: true });
  const page = await browser.newPage();
  page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));

  // 访问页面，注意使用await，其保障了页面初成功初始化
  await page.goto('http://sample.com');
 
  const web_txt = await page.evaluate(() => {
    // 在浏览器执行相应的代码并返回值，注意：仅能返回可以被序列化的（不能返回对象，因为其是沙箱，运行在两个不同的环境中）
    return document.documentElement.innerText;
  })
  // 初始化抓取的文本
  console.log(web_txt);
 
  // 模拟点击某处，点击后出现新的组件
  await page.click('#loginButton');
  // 等待这个组件出现
  await page.waitForSelector('someSeleter');
  // 或者，等待网络请求完成
  await page.waitForNetworkIdle();
  
  
  await browser.close();
  
})();