如何将本指南实施到无头浏览器https://www.npmjs.com/package/user-agents#contributing

Question

This is a package for generating random user agents: https://www.npmjs.com/package/user-agents

How can I implement this in headless chrome browser, using Puppeteer?

Here's my randomly generated output, but this only logged to the console and wasn't implemented in the headless browser:

{
  "appName": "Netscape",
  "connection": {
    "downlink": 10,
    "effectiveType": "4g",
    "rtt": 0
  },
  "platform": "Win32",
  "pluginsLength": 3,
  "vendor": "Google Inc.",
  "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) 
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 
Safari/537.36",
  "viewportHeight": 660,
  "viewportWidth": 1260,
  "deviceCategory": "desktop",
  "screenHeight": 800,
  "screenWidth": 1280
}

My Node.js code:

const puppeteer = require('puppeteer');

// library from https://www.npmjs.com/package/user-agents#contributing
const UserAgent = require('user-agents');

// This is where we'll put the code to get around the tests.
const preparePageForTests = async (page) => {
// TODO: Not implemented yet.
  const userAgent = new UserAgent();
  console.log(userAgent.toString());
  console.log(JSON.stringify(userAgent.data, null, 2));
  await page.setUserAgent(userAgent.toString());

}

(async () => {
  // Launch the browser in headless mode and set up a page.
  const browser = await puppeteer.launch({
    args: ['--no-sandbox'],
    headless: true,
  });
  const page = await browser.newPage();

  // Prepare for the tests (not yet implemented).
  await preparePageForTests(page);

  // Navigate to the page that will perform the tests.
   const testUrl = 'https://intoli.com/blog/' +
  'not-possible-to-block-chrome-headless/chrome-headless-test.html';
  await page.goto(testUrl);

  // Save a screenshot of the results.
  await page.screenshot({path: 'C:\\Users\\Badar\\Desktop\\headless-test- 
 result.png'});

  // Clean up.
  await browser.close()
})();

Answer 1

I have lightly edited your code, which is now working correctly for me:

const puppeteer = require('puppeteer');
const UserAgent = require('user-agents');

const preparePageForTests = async (page) => {
  const user = new UserAgent();
  await page.setUserAgent(String(user.data.userAgent));
  const currentAgent = await page.evaluate('navigator.userAgent');
  console.log(currentAgent);
}

(async () => {
  const browser = await puppeteer.launch({
    args: ['--no-sandbox'],
    headless: false,
  });
  const page = await browser.newPage();
  await preparePageForTests(page);
  const testUrl = 'https://intoli.com/blog/' +
    'not-possible-to-block-chrome-headless/chrome-headless-test.html';
  await page.goto(testUrl);
  await page.screenshot({ path: 'result.png' });
  await browser.close();
})();

Based on the console output you provided, I decided to grab the string from user.data.userAgent .

I also added some code to check that the new user agent was set successfully:

const currentAgent = await page.evaluate('navigator.userAgent');
console.log(currentAgent);

This output changed randomly every time I ran the file, as expected.