使用 puppeteer 测试 AWS amplify react 应用程序

Question

我想用 AWS amplify 身份验证（使用 cognito）测试一个 React 应用程序。

第一步是登录应用，填写输入字段（电子邮件和密码）并提交登录表单

等待page.waitForSelector("#email"); await page.type("#email", "email@example.com", {delay: 500});

等待page.waitForSelector("#pass"); await page.type("#pass", "secret", {delay: 500});

然后提交事件

但使用 amplify 时它不起作用 - 未找到输入元素

表格如下

form login amplify

如您所见，html 元素形式的用户名只是 input#username ，但如果我尝试 select 使用普通 JS sthe elemtns，它不起作用

i cant find the input elements

如何将值设置为表单字段并为 puppeter 提交表单

Answer 1

如果我错了，这可能是一个令人沮丧的答案，但您似乎没有使用正确的 ID。从这个截图 (https://i.stack.imgur.com/v0bMd.png) it seems the id is actually username.input and in the second screenshot (https://i.stack.imgur.com/PslyH.png) 来看，你似乎认为 id 停止在 username

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

希望这真的有效

Answer 2

这是因为输入的用户名和密码在阴影中 dom，这就是它无法找到它的原因。查看 https://github.com/Georgegriff/query-selector-shadow-dom ，此工具将使您的生活更轻松。

这是一个使用 Amplify 默认登录模式的虚构示例：

const { Given, When, Then, setDefaultTimeout } = require('@cucumber/cucumber');
const {  QueryHandler, } = require("query-selector-shadow-dom/plugins/puppeteer");

const puppeteer = require('puppeteer');

setDefaultTimeout(60 * 1000);


Given('I visit the myWebsitewebsite', async function () {
    this.browser = await puppeteer.launch({
        headless: true,
        devtools: false
    });
    this.page = await this.browser.newPage();
    await puppeteer.registerCustomQueryHandler('shadow', QueryHandler);
    await this.page.goto('https://example.mywebsite.com', {
        waitUntil: 'networkidle0',
    });
});

When('enter my credentials', async function () {
    const userNameField = await this.page.waitForSelector("shadow/#username");
    const passWordField = await this.page.waitForSelector("shadow/#password");
    
    await userNameField.type("xxxxxxxxx");  
    await passWordField.type("xxxxxxxxxxx");
    await this.page.keyboard.press("Enter")
});

Then('I see my dashboard', async function () {
    await this.page.waitFor("#dashboard-card");
    await this.browser.close();
    
});

使用 puppeteer 测试 AWS amplify react 应用程序

Testing with puppeteer an AWS amplify react app

javascript

reactjs

aws-amplify