使用 puppeteer 测试 AWS 放大反应应用程序答案

【问题标题】：Testing with puppeteer an AWS amplify react app使用 puppeteer 测试 AWS 放大反应应用程序
【发布时间】：2020-10-03 07:40:27
【问题描述】：

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

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

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

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

然后是提交事件

但是使用放大它不起作用 - 找不到输入元素

表格如下

form login amplify

如您所见，html 元素表单 username 只是 input#username ，但如果我尝试使用纯 JS 选择 sthe elemtns，它不起作用

i cant find the input elements

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

【问题讨论】：

标签： javascript reactjs aws-amplify

【解决方案1】：

这是由于用户名和密码输入在 shadow 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();
    
});

【讨论】：

请解释你的代码是做什么的以及它是怎么做的。

【解决方案2】：

如果我错了，这可能是一个令人沮丧的答案，但似乎您没有使用正确的 id。从这个截图（https://i.stack.imgur.com/v0bMd.png）来看，id 似乎实际上是username.input，而在第二个截图（https://i.stack.imgur.com/PslyH.png）中，你似乎认为 id 停止在username

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 (" _")、冒号 (":") 和句点 (".")。

希望这真的有效

【讨论】：