英文:
E2e testing for Google Login with Puppeteer
问题
以下是已翻译的代码部分：
I'm new to Puppeteer and trying to write an e2e test for a React app that enables logins using the GoogleLogin component from @react-oauth/google.
The code below works until the Google sign in window opens, but then I don't know how to access elements. I've looked at the element and I know that there's an input of type email, so I'd like to wait for that selector, but `page` doesn't seem to be the place to access it.
How do I move to the next step with this test?
const chalk = require('chalk');
class LoginAccount {
constructor(page) {
this.url = "http://localhost:3000";
this.page = page;
}
async login(username, password) {
try {
const navigationPromise = page.waitForNavigation();
await this.page.goto(this.url);
const selector = '[role="button"]';
await this.page.waitForSelector(selector);
const button_handler = await page.$(selector);
await button_handler.evaluate(b => b.click());
await navigationPromise
const email_field = 'input[type="email"]';
await page.waitForSelector(email_field)
// Times out here
console.log("Got email input")
await this.page.type(email_field, username);
} catch (err) {
console.log(chalk.red('ERROR => ', err));
}
}
}
module.exports = (page) => new LoginAccount(page);
请注意，代码中的 HTML 标签和属性名称已保持原样，不做翻译。如果您需要其他帮助，请随时告诉我。
英文:
I'm new to Puppeteer and trying to write an e2e test for a React app that enables logins using the GoogleLogin component from @react-oauth/google.
The code below works until the Google sign in window opens, but then I don't know how to access elements. I've looked at the element and I know that there's an input of type email, so I'd like to wait for that selector, but page doesn't seem to be the place to access it.
How do I move to the next step with this test?
const chalk = require( 'chalk' );
class LoginAccount {
constructor( page ) {
this.url = "http://localhost:3000"
this.page = page;
}
async login( username, password ) {
try {
const navigationPromise = page.waitForNavigation();
await this.page.goto( this.url );
const selector = '[role="button"]';
await this.page.waitForSelector( selector );
const button_handler = await page.$(selector);
await button_handler.evaluate(b => b.click());
await navigationPromise
const email_field = 'input[type="email"]'
await page.waitForSelector( email_field )
// Times out here
console.log("Got email input")
await this.page.type( email_field, username );
} catch ( err ) {
console.log( chalk.red( 'ERROR => ', err ) );
}
}
}
module.exports = ( page ) => new LoginAccount( page );
答案1
得分: 0
我成功解决了这个问题。browser.waitForTarget 方法为我提供了我需要的新浏览器窗口的句柄。下面是经过修改的代码（从按钮点击之前开始）：
const pageTarget = page.target();
await button_handler.evaluate(b => b.click());
const newTarget = await browser.waitForTarget(target => target.opener() === pageTarget);
const newPage = await newTarget.page();
const email_field = 'input[type="email"]';
await newPage.waitForSelector(email_field);
console.log("获取到邮箱输入框");
希望这对你有帮助。
英文:
I was able to solve this. The browser.waitForTarget method gets me a handle to the new browser window that I need. The modified code below (starting just before the button click) works correctly:
const pageTarget = page.target();
await button_handler.evaluate(b => b.click());
const newTarget = await browser.waitForTarget(target => target.opener() === pageTarget);
const newPage = await newTarget.page();
const email_field = 'input[type="email"]'
await newPage.waitForSelector( email_field )
console.log("Got email input")
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论