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

Question

大家好，我需要帮助来解决这个问题，我正在尝试自动化登录 Nike BR 网站（这与其他网站不同），但每次我重新加载页面时，xpath 都会不断变化，有人可以帮助我解决这个问题吗？谢谢你们 网站是 https://www.nike.com.br/ 您需要单击“登录/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', '[email protected]', { delay: 110 });
    const passwordinput = await page.type('changing xpath', '[email protected]', { delay: 110 });

    

    

})();

Answer 1

只是不要使用动态部分并通过在重新加载之间不会改变的内容来选择元素。据我所知，这些应该有效。

选择电子邮件地址输入框：

const emailinput = await page.type('//input[@name="emailAddress"]', '[email protected]', { 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 = '[email protected]');
  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();

Answer 2

page.waitForSelector("text=登录", new Page.WaitForSelectorOptions().setTimeout(5000));