时间戳

首页 > 解决方案 > Flutter Web - 如何在桌面上的 Chrome 中测试 Flutter Web 应用程序打开？

flutter - Flutter Web - 如何在桌面上的 Chrome 中测试 Flutter Web 应用程序打开？

问题描述

网页上有一个对第三方应用程序进行 API 调用的按钮。作为回报，第三方应用程序会在网页上呈现。

现在，第三方应用程序（https://goknow.me/#/）已经开发出来了flutter，我对flutter. 我正在使用java,selenium并webdriver进行端到端测试。我对应用程序的其余部分使用相同的工具集，并且工作正常。

在 中检查时chrome，DOM 看起来像这样：颤振元素

Flutter 应用程序有一个表单，我想找到一个元素，以便在测试自动化期间发送输入。通过在线搜索，我找到了这个appium-flutter-driver。我还在jar我的项目中包含了所需的内容。使用 selenium webdriver，我无法在 Flutter 应用程序中找到在桌面上的 Chrome 浏览器中呈现的元素。

这是代码：

import pro.truongsinh.appium_flutter.FlutterFinder;
import pro.truongsinh.appium_flutter.finder.FlutterElement;

protected FlutterFinder find;

WebElement iframe = driver.findElement(By.xpath("//iframe[@id='know-iframe']"));
driver.switchTo().frame(iframe);

    find = new FlutterFinder(driver);
    FlutterElement elm = find.text("Email");
    elm.click();
    elm.sendKeys("hello world");

在测试自动化期间，我想选择其中的字段form并将输入发送到这些字段。

如何flutter在桌面上的 Chrome 浏览器中找到呈现在另一个 Web 应用程序中的 Web 应用程序中的元素？

标签： flutterseleniumwebdriverflutter-web

解决方案

您可以尝试使用io.github.sukgu来帮助您处理阴影元素。我能够自动化您提到的场景。下面是详细代码。

步骤 1 添加以下依赖项

<!-- https://mvnrepository.com/artifact/io.github.sukgu/automation -->
<dependency>
    <groupId>io.github.sukgu</groupId>
    <artifactId>automation</artifactId>
    <version>0.1.3</version>
</dependency>

第 2 步在测试文件中使用以下导入

import io.github.sukgu.*;

第 3 步下面是对我有用的整个代码

        WebDriver driver = new ChromeDriver();
        driver.get("https://goknow.me/#/");
        WebDriverWait wait = new WebDriverWait(driver,20);
        wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.id("know-iframe")));
        

        Shadow shadow = new Shadow(driver);
        WebElement emailField = shadow.findElement("input[id='email']");


        emailField.sendKeys("hello world");

推荐阅读