如何使用Selenide识别React网页点击按钮后新增的图片元素？

根因说明 #

• 你之前使用的Condition.appear和Condition.visible仅校验元素的可见性，没有先确认动态生成的元素是否已插入DOM，同时缺少对图片资源本身加载完成状态的校验
• 若在点击按钮前就预先初始化了目标元素的Selenide实例，部分场景下会出现定位上下文失效的问题

实现代码 #

import static com.codeborne.selenide.Condition.attribute;
import static com.codeborne.selenide.Condition.exist;
import static com.codeborne.selenide.Condition.visible;
import java.time.Duration;
import com.codeborne.selenide.SelenideElement;

// 超时时间设置为10秒，覆盖5秒的图片加载耗时，留足冗余
private static final int TIME_OUT = 10;

/**
 * 等待动态生成的图片加载完成
 * @param imgElement 目标img元素实例，建议在点击按钮后再声明定位
 * @return 加载成功返回true，超时返回false
 */
public static boolean waitImageLoadedSuccess(SelenideElement imgElement) {
    try {
        // 第一步：等待元素插入DOM，解决动态生成元素找不到的问题
        imgElement.should(exist, Duration.ofSeconds(TIME_OUT));
        // 第二步：等待元素在页面可见
        imgElement.should(visible, Duration.ofSeconds(TIME_OUT));
        // 第三步：校验图片资源加载完成，通过img标签原生complete属性判断
        imgElement.should(attribute("complete", "true"), Duration.ofSeconds(TIME_OUT));
        // 可选扩展：如果需要校验图片地址是否符合预期，可加下面的校验
        // imgElement.should(attributeMatching("src", ".*预期的图片地址特征.*"), Duration.ofSeconds(TIME_OUT));
        return true;
    } catch (Exception e) {
        return false;
    }
}

使用注意事项 #

• 定位目标img元素时优先使用data-testid、alt等稳定属性，避免使用DOM层级索引，防止React渲染结构变动导致定位失效
• 确保点击按钮的操作执行完成后再调用该等待方法，如果按钮点击后有loading态，可以先等待loading结束再执行等待
• 如果仍然抛出NoSuchElementException，可开启Selenide的异常自动截图/保存页面源码功能，排查实际DOM结构和定位表达式是否匹配

内容的提问来源于stack exchange，提问作者Rajith Kariyawsam