如何使用Puppeteer从JSON文件读取数据至JavaScript并获取用户名、密码等账户信息

Got it, let's adjust your Puppeteer script to pull login credentials from the JSON config file instead of hardcoding them. We'll keep all your original login logic intact, just swap out the hardcoded values with data from the config.

Step 1: Add required modules for file handling #

First, we need Node.js's built-in fs (file system) and path modules to read and parse the JSON config. Add these imports at the top of your script.

Step 2: Read and parse the JSON config #

We'll read the config file, parse it into a JavaScript object, then extract the username and password from the nested structure in your JSON.

Step 3: Replace hardcoded credentials with config data #

Swap out the hardcoded email and password in your login field typing logic with the values from the config.

Full modified code #

const { errors } = require('puppeteer');
const puppeteer = require('puppeteer-extra');
const fs = require('fs');
const path = require('path');

(async () => {
  // 读取并解析JSON配置文件（假设config.json和当前脚本在同一目录）
  const configPath = path.join(__dirname, 'config.json');
  const configContent = fs.readFileSync(configPath, 'utf8');
  const config = JSON.parse(configContent);

  // 提取第一个账户的用户名和密码（如果有多个账户可循环处理）
  const account = config.nikeSNKRS.accounts[0].accounts[0];
  const { user, password } = account;

  const browser = await puppeteer.launch({
    headless: false,
    ignoreHTTPSErrors: true,
    webpage: true,
    slowMo: 3,
    executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
  });
  const page = await browser.newPage();
  await installMouseHelper(page); // Makes mouse visible
  await page.setDefaultNavigationTimeout(0);
  await page.evaluate(() => { debugger; });
  await page.goto('https://nike.com/my/login');
  await page.waitFor(500);

  const loginSelector = '[data-componentname="emailAddress"]';
  const loginButton = await page.waitForSelector(loginSelector);
  await loginButton.click();
  await loginButton.type(user); // 使用配置文件中的用户名
  await page.waitFor(500);

  const loginPswSelector = '[data-componentname="password"]';
  const loginPswButton = await page.waitForSelector(loginPswSelector);
  await loginPswButton.click();
  await loginPswButton.type(password); // 使用配置文件中的密码
  await page.waitFor(500);

  const signInBtnSelector = '[class="nike-unite-submit-button loginSubmit nike-unite-component"]';
  const signInBtnButton = await page.waitForSelector(signInBtnSelector);
  await signInBtnButton.click();
})();

Key notes: #

• Path safety: Using path.join(__dirname, 'config.json') ensures we reference the config file correctly regardless of where you run the script from, avoiding relative path issues.
• Variable declarations: I added const to all selector buttons (like loginButton) to avoid accidental global variable leaks, which is a best practice in Node.js.
• Multiple accounts: If you have multiple accounts in your JSON config, you can wrap the login logic in a loop over config.nikeSNKRS.accounts[0].accounts to process each account sequentially.
• Error handling: For production use, you might want to add try/catch blocks around the config reading and parsing step to handle cases where the file is missing or malformed.

内容的提问来源于stack exchange，提问作者Adam Toh