javascript - Protractor :如何单击模态对话框中的按钮( Angular 元素)

Question

我正在使用 Protractor 框架编写 Angular 应用程序的自动化测试。

测试场景:

1. 单击按钮:创建 PDF 报告

   • 出现模态对话框窗口

2. 单击按钮:在模态对话框中立即运行报告

我在点击模态对话框元素中的按钮时遇到问题。

我收到以下 Protracor 错误

1. 失败:过时的元素引用:元素未附加到页面文档，

2. 失败:使用定位器找不到元素

测试

describe("Managing PDF Project Report", function () {
    it("contain create PDF project for test purpose ", async function () {
        await logIn();
        await element(by.css(".btn-group.pull-right > button ")).click();
        await element(by.css(".dropdown-menu.no-print")).element(by.css("li:nth-child(3) > a")).click();
        await browser.wait(element(by.css(".modal-footer > div > button:nth-child(2)")).click(), 5000);
    });

我还尝试通过 ButtonText、ng-click 属性查找元素，但它也不起作用。

HTML

问题

我有点困惑，因为这个元素的行为不像 iframe 或浏览器弹出窗口。有什么想法如何与此模式中的元素交互吗？

Answer 1

您从哪个元素中收到这些错误？如果是立即运行报告按钮，您可以尝试使用CSS:

element(by.css('[ng-click="createReport()"]');

此外，我建议添加一些显式等待以确保 Protractor 正确等待:

const EC = protractor.ExpectedConditions;

await browser.wait(EC.visibilityOf($$('.modal-dialog .modal-content .modal-footer')), 5000);
await browser.wait(EC.elementToBeClickable(element(by.css('[ng-click="createReport()"]')), 5000);
await element(by.css('[ng-click="createReport()"]').click();