playwright-getByAltText

一、getByAltText定位的作用

所有图片都应有一个描述图片的 alt 属性。你可以使用 page.getByAltText() 根据替代文本定位图片。

可以看下如下html

要获取图片 alt 属性 playwright logo的img的定位,可以使用:

java 复制代码
page.getByAltText("playwright logo")

二、举个例子:

①先创建工具类
复制代码
TestPlayWright
java 复制代码
import com.microsoft.playwright.*;
import com.microsoft.playwright.options.AriaRole;
import com.microsoft.playwright.options.ServiceWorkerPolicy;
 
import java.util.ArrayList;
import java.util.List;
 
public class TestPlayWright {
    public Playwright playwright;
    public Browser browser;
    public BrowserContext context;
    public Page page;
    public int slowMo = 200;
    public boolean headless = false;
    public String bowserName = "CHROMIUM";
 
    public Page getPage() {
        return page;
    }
 
    public void init(){
        List<String> argslist = new ArrayList<String>();
        argslist.add("--window-position=" + -8 + "," + 0);
 
        playwright = Playwright.create();
        switch (bowserName) {
            case "CHROMIUM":
                browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setArgs(argslist)
                        .setHeadless(headless)
                        .setSlowMo(slowMo));
                break;
            case "FIREFOX":
                browser = playwright.firefox().launch(new BrowserType.LaunchOptions()
                        .setHeadless(headless).setArgs(argslist)
                        .setSlowMo(slowMo));
                break;
            case "WEBKIT":
                browser = playwright.webkit().launch(new BrowserType.LaunchOptions()
                        .setHeadless(headless).setArgs(argslist)
                        .setSlowMo(slowMo));
                break;
        }
        assert browser != null;
        Browser.NewContextOptions contextOpts = new Browser.NewContextOptions()
                .setServiceWorkers(ServiceWorkerPolicy.BLOCK);  // 屏蔽所有 Service Worker
        context = browser.newContext(contextOpts);
//        # 2. 清除当前上下文的所有 Cookie(推荐)
        context.clearCookies();
        page = context.newPage();
    }
    public void browserClose(){
        if(browser!=null){
            browser.close();
        }
    }
    public void playwrightClose() {
        if(playwright!=null){
            playwright.close();
        }
    }
 
 
}
②创建TestGetByAltText类
java 复制代码
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;


public class TestGetByAltText {
    public static void main(String[] args)  {
        TestPlayWright test = new TestPlayWright();
        test.init();
        Page page = test.getPage();

        page.navigate("https://playwright.nodejs.cn/docs/locators");
        page.waitForTimeout(2000);
        //定位alt="playwright logo" 的定位标签 nth(1)代表第2个
        Locator altText = page.getByAltText("playwright logo").nth(1);
        //点击
        altText.click();
        //等待1秒
        page.waitForTimeout(2000);
        //高亮定位
        altText.highlight();
        //等待1秒
        page.waitForTimeout(5000);
        test.browserClose();
        test.playwrightClose();
    }
}
③运行效果:
三、通过葫芦娃ui自动化工具操作
①打开葫芦娃ui自动化工具
②加载对应step.xlsx和data.xlsx
③step.xlsx配置如图:

case sheet输入如下

④创建对应sheet playwright-getByAltText 如下,定位方法选择 getByAltText:
⑤切换到工具,点击运行:

⑥生成的报告如下:

运行效果和上面一样

完全零代码,直接维护excel 就行,谢谢大家的支持,可以点个赞或转发。谢谢大家~

想要工具可以私聊哈~

相关推荐
OH_TPC2 天前
HarmonyOS APP开发---“动效君“UI动效素材库App,需要用到这个库
ui·华为·harmonyos·鸿蒙
小雨爱测2 天前
Photoshop 实战入门:从界面认知到第一张成品图
ui·photoshop
螺丝钉tina3 天前
[Playwright] [02]常用命令与调试:Debug UI、Mode和 Trace Viewer
开发语言·javascript·测试工具·ui·自动化
郝学胜-神的一滴3 天前
游戏设计:原型与开发 18:Unity入门的第一课
人工智能·程序人生·游戏·ui·unity·游戏引擎
tedcloud1233 天前
Docker Compose 部署 Uptime Kuma:配置 HTTPS、QQ 邮箱告警与数据备份
服务器·网络协议·ui·docker·容器·https·开源
笨笨饿3 天前
#60_# 一、Photoshop 2025 如何批量导出 PSD 文件中的所有图层为独立 PNG 图片
stm32·单片机·嵌入式硬件·物联网·ui·51单片机·photoshop
qq_426003963 天前
UI自动化高频次登录login限流解决方案
python·ui·自动化
oicola4 天前
【UI动效】科幻风长任务进度动效设计方案
ui
xy34535 天前
Axure9.0 热区典型实战使用场景
ui·axure·原型·产品设计
喜欢吃豆6 天前
我开源了 Agent UI Lab 用交互实验理解 AG-UI A2UI 与 MCP Apps
ui·开源·大模型·交互