用木偶师测试AWS amplify react应用程序

Question

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

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

等待页面。waitForSelector（“电子邮件”）；等待页面。键入“#email”[e-mail]“，{延迟：500}）；

等待page.wait选择器（"#通过"）；等待page.type（"#通过"，"秘密"，{延迟： 500}）；

然后提交事件

但使用amplify时，它不起作用——输入元素没有被找到

表格如下

表单登录放大

正如您所看到的，html元素form username只是输入#username，但是如果我尝试用普通JS选择元素，它就不起作用了

我找不到输入元素

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

Answer 1

如果我错了，这可能是一个令人沮丧的答案，但从这个截图来看，你似乎没有使用正确的id(https://i.stack.imgur.com/v0bMd.png)看起来id实际上是用户名。在第二个屏幕截图中输入(https://i.stack.imgur.com/PslyH.png)你似乎认为id在username

ID和名称标记必须以字母（[a-Za-z]）开头，后面可以跟任意数量的字母、数字（[0-9]）、连字符（“-”）、下划线（“-”）、冒号（：”）和句点（“.”）。

希望这真的管用

Answer 2

这是因为用户名和密码输入在阴影dom中，所以无法找到它。退房https://github.com/Georgegriff/query-selector-shadow-dom，这个工具会让你的生活更轻松。

下面是一个使用Amplify default SignIn模式的虚构示例：

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();
    
});