使用js操作DOM时发生了奇怪的事情答案

【问题标题】：Something strange happened when I operated DOM using js使用js操作DOM时发生了奇怪的事情
【发布时间】：2018-08-10 05:58:40
【问题描述】：

你能在walmart.com的页面中使用js选择size吗？我试过几次，但没有效果。喜欢这个：

document.querySelector('.prod-ProductVariantType .chooser-option-current div').click();
document.querySelectorAll('.prod-ProductVariantType div.chooser-option-list div div')[1].click();

执行上述代码后，什么也没发生。页面网址：https://www.walmart.com/ip/NEW-Laptop-Cart-Table-Desk-Height-Adjustable-Portable-with-Rolling-Wheels-SPTE/794250587

这个案子就像我在标题中提到的那样。

更新：我弄错了应该是size而不是color，抱歉再说一遍。

【问题讨论】：

不确定你在问什么。您想在购物页面上选择不同颜色的商品吗？
我迫切需要写一本类似这个问题的书。
@JaromandaX 我只是想用js选择一种颜色，但不费力，即使在显示颜色列表后单击颜色项。但是如果我手动单击颜色项，它就可以了。这让我很困惑:(
@connexo 很抱歉描述不清楚:(
别误会，我喜欢你的问题标题。这几乎是 - 不，它是诗。绝对是您问题中最好的部分。

标签： javascript html dom automation puppeteer

【解决方案1】：

如果你运行这段代码没有什么奇怪的事情发生（它会选择其他颜色选项）：

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.walmart.com/ip/NEW-Laptop-Cart-Table-Desk-Height-Adjustable-Portable-with-Rolling-Wheels-SPTE/794250587');

    await page.click('.prod-ProductVariantSwatch > div > div:nth-child(1) > label > span');

    await page.screenshot({ path: 'image.png' });
    await browser.close();
})();

【讨论】：

嗨，我犯了一个错误，它应该是尺寸而不是颜色，抱歉:)