无法使用 puppeteer 单击按钮
Not able to click on a button using puppeteer
我正在使用木偶师。
await page.type('#guestEmail', email);
await page.click("#checkoutGuest");
网站的工作原理是,用户需要先输入电子邮件,然后 select 才能使用该按钮。奇怪的是,上面的代码不起作用。我尝试过几秒钟的超时以等待按钮可用但没有。
这是页面的 link 。有人可以帮忙吗?
你可以试试这个。
let browser, page;
let pageUrl = 'https://www.jdsports.com.sg/checkout/login/';
let email = 'testing@gmail.com';
try {
browser = await puppeteer.launch({ headless: true });
page = await browser.newPage();
await page.goto(pageUrl, { waitUntil: 'domcontentloaded', timeout: 60000 });
await page.type('#guestEmail', email);
await page.waitForSelector('button#checkoutGuest:not([disabled])');
await page.click("#checkoutGuest");
} catch (err) {
console.log(err.message);
} finally {
if (browser) {
await browser.close();
console.log('closing browser');
}
}
或者您可以尝试 page.evaluate。
let browser, page;
let pageUrl = 'https://www.jdsports.com.sg/checkout/login/';
let email = 'testing@gmail.com';
try {
browser = await puppeteer.launch({ headless: true });
page = await browser.newPage();
await page.goto(pageUrl, { waitUntil: 'domcontentloaded', timeout: 60000 });
await page.type('#guestEmail', email);
await page.evaluate(() => {
if (!document.getElementById('checkoutGuest').disabled) {
await page.click("#checkoutGuest");
}
});
} catch (err) {
console.log(err.message);
} finally {
if (browser) {
await browser.close();
console.log('closing browser');
}
}
或者您可以尝试使用 waitForFunction。
let browser, page;
let pageUrl = 'https://www.jdsports.com.sg/checkout/login/';
let email = 'testing@gmail.com';
try {
browser = await puppeteer.launch({ headless: true });
page = await browser.newPage();
await page.goto(pageUrl, { waitUntil: 'domcontentloaded', timeout: 60000 });
await page.type('#guestEmail', email);
await page.waitForFunction('document.getElementById("checkoutGuest").className != "btn btn-level1 large disabled"');
} catch (err) {
console.log(err.message);
} finally {
if (browser) {
await browser.close();
console.log('closing browser');
}
}
也许您的问题出在弹出窗口上。您始终可以通过 运行 puppeteer 在 headful 模式下或通过制作屏幕截图来调试您的 puppeteer 会话。当然有更好的方法来处理弹出窗口,但你明白了。
const checkForPopup = () => {
const item = myPage.$('.countryselector');
if(item) {
myPage.click('.close');
}
}
const main = async () => {
const browser = await puppeteer.launch({headless: false});
myPage = await browser.newPage();
// visit page with product
await myPage.goto('https://www.jdsports.com.sg/product/white-nike-waffle-one/16139953_jdsportssg/');
// select product
await myPage.click("button[title=\"Select Size 6.5\"]");
checkForPopup();
await myPage.click("#addToBasket");
checkForPopup();
// add product to cart
await myPage.waitForSelector('.addToCatPopupDesignCheckout');
checkForPopup();
await myPage.click(".addToCatPopupDesignCheckout");
checkForPopup();
// type email and checkout
await myPage.waitForSelector('#guestEmail');
checkForPopup();
await myPage.click('#guestEmail');
checkForPopup();
await myPage.keyboard.type('someEmail');
checkForPopup();
await myPage.click("#checkoutGuest");
}
我正在使用木偶师。
await page.type('#guestEmail', email);
await page.click("#checkoutGuest");
网站的工作原理是,用户需要先输入电子邮件,然后 select 才能使用该按钮。奇怪的是,上面的代码不起作用。我尝试过几秒钟的超时以等待按钮可用但没有。 这是页面的 link 。有人可以帮忙吗?
你可以试试这个。
let browser, page;
let pageUrl = 'https://www.jdsports.com.sg/checkout/login/';
let email = 'testing@gmail.com';
try {
browser = await puppeteer.launch({ headless: true });
page = await browser.newPage();
await page.goto(pageUrl, { waitUntil: 'domcontentloaded', timeout: 60000 });
await page.type('#guestEmail', email);
await page.waitForSelector('button#checkoutGuest:not([disabled])');
await page.click("#checkoutGuest");
} catch (err) {
console.log(err.message);
} finally {
if (browser) {
await browser.close();
console.log('closing browser');
}
}
或者您可以尝试 page.evaluate。
let browser, page;
let pageUrl = 'https://www.jdsports.com.sg/checkout/login/';
let email = 'testing@gmail.com';
try {
browser = await puppeteer.launch({ headless: true });
page = await browser.newPage();
await page.goto(pageUrl, { waitUntil: 'domcontentloaded', timeout: 60000 });
await page.type('#guestEmail', email);
await page.evaluate(() => {
if (!document.getElementById('checkoutGuest').disabled) {
await page.click("#checkoutGuest");
}
});
} catch (err) {
console.log(err.message);
} finally {
if (browser) {
await browser.close();
console.log('closing browser');
}
}
或者您可以尝试使用 waitForFunction。
let browser, page;
let pageUrl = 'https://www.jdsports.com.sg/checkout/login/';
let email = 'testing@gmail.com';
try {
browser = await puppeteer.launch({ headless: true });
page = await browser.newPage();
await page.goto(pageUrl, { waitUntil: 'domcontentloaded', timeout: 60000 });
await page.type('#guestEmail', email);
await page.waitForFunction('document.getElementById("checkoutGuest").className != "btn btn-level1 large disabled"');
} catch (err) {
console.log(err.message);
} finally {
if (browser) {
await browser.close();
console.log('closing browser');
}
}
也许您的问题出在弹出窗口上。您始终可以通过 运行 puppeteer 在 headful 模式下或通过制作屏幕截图来调试您的 puppeteer 会话。当然有更好的方法来处理弹出窗口,但你明白了。
const checkForPopup = () => {
const item = myPage.$('.countryselector');
if(item) {
myPage.click('.close');
}
}
const main = async () => {
const browser = await puppeteer.launch({headless: false});
myPage = await browser.newPage();
// visit page with product
await myPage.goto('https://www.jdsports.com.sg/product/white-nike-waffle-one/16139953_jdsportssg/');
// select product
await myPage.click("button[title=\"Select Size 6.5\"]");
checkForPopup();
await myPage.click("#addToBasket");
checkForPopup();
// add product to cart
await myPage.waitForSelector('.addToCatPopupDesignCheckout');
checkForPopup();
await myPage.click(".addToCatPopupDesignCheckout");
checkForPopup();
// type email and checkout
await myPage.waitForSelector('#guestEmail');
checkForPopup();
await myPage.click('#guestEmail');
checkForPopup();
await myPage.keyboard.type('someEmail');
checkForPopup();
await myPage.click("#checkoutGuest");
}