如何找到动态xpath（每次重新加载页面时都会更改）

Question

大家好，我需要帮助来解决这个问题，我正在尝试自动登录 Nike BR 网站（这与其他网站不同），但每次我重新加载页面时，xpath 都会不断变化，任何人都可以帮助我解决这个问题问题？感谢你们 该网站是https://www.nike.com.br/ 您需要点击“Login / Inscreva-se”然后输入将加载

const puppeteer = require ('puppeteer');
const login = '//*[@id="anchor-acessar-unite-oauth2"]';
const emailinput = 'changing xpath'
const passwordinput = 'changing xpath'
(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    
   
    await page.setViewport({ width: 1920, height: 1080});
    await page.goto ('https://www.nike.com.br');
    const login= await page.waitForXPath('//*[@id="anchor-acessar-unite-oauth2"]');
    await login.click();
    const emailinput = await page.type('changing xpath', 'myEmail@outlook.com', { delay: 110 });
    const passwordinput = await page.type('changing xpath', 'myEmail@outlook.com', { delay: 110 });

    

    

})();

Answer 1

只是不要使用动态部分，并通过在重新加载之间没有变化的东西来选择元素。据我所知，这些应该可以工作。

选择邮箱地址输入框：

const emailinput = await page.type('//input[@name="emailAddress"]', 'myEmail@outlook.com', { delay: 110 });

选择密码输入框：

const passwordinput = await page.type('//input[@name="password"]', 'password', { delay: 110 });

更新

现在我明白了为什么上述方法不能立即起作用。原因是您尝试选择的内容不在顶部框架中，而是在 iframe 中。

要使其正常工作，您需要将脚本修改为

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto('https://www.nike.com.br');
  const login = await page.waitForXPath('//*[@id="anchor-acessar-unite-oauth2"]');
  await login.click();

  const frameElement = await page.waitForXPath('//iframe[@id="nike-unite-oauth2-iframe"]');
  const frame = await frameElement.contentFrame();

  const emailInput = await frame.waitForXPath('//input[@name="emailAddress"]');
  const passwordInput = await frame.waitForXPath('//input[@name="password"]');
  await emailInput.evaluate((elem) => elem.value = 'myEmail@outlook.com');
  await passwordInput.evaluate((elem) => elem.value = 'password');
})();

我把type改成evaluate直接赋值。我发现 type 不可靠，没有时间弄清楚原因。

更新 2

还可以单击登录按钮，您可以将其添加到末尾：

const submitInput = await frame.waitForXPath('//div[contains(@class, "loginSubmit")]/input', { visible: true });
await submitInput.click();