Hello Playwright：(9)执行 JavaScript 代码

Playwright 提供了大量的 API 用于与页面元素交互，但是在某些场景下还是不能完全满足要求。比如我们需要获得包括元素本身的 HTML，但是目前只有下列 API :

• InnerHTMLAsync 返回元素内的 HTML 内容

• InnerTextAsync 返回元素内的文本内容

而使用 JavaScript 执行element.outerHTML是可以获取到包括元素本身的 HTML的：

EvaluateAsync

Page.EvaluateAsync(expression, arg)API 可以在网页的上下文中运行 JavaScript 函数，并将结果带回 Playwright 环境:

var outerHTML = await page.EvaluateAsync<string>("document.getElementById(\"kw\").outerHTML");

arg参数可以是任何可序列化值：

//基础类型
await page.EvaluateAsync<int>("num=> num+1",1);

//数组
var result = await page.EvaluateAsync<int>("array=> array.length", new[] { 1,2,3 });

//对象
await page.EvaluateAsync<int>("o=> o.A+o.B", new  { A=1,B=2 });

我们还可以直接使用 JavaScript 函数操作元素，比如Click。虽然 Playwright API 提供了ClickAsync方法模拟鼠标点击，但是存在一定限制条件，例如元素需要可见且可操作。

如果元素被隐藏了。我们可以走捷径，使用 click 函数强制点击。比如点击百度首页中“更多"链接下的“翻译”链接：

//await page.Locator("//*[@id=\"s-top-more\"]/div[1]/a[1]").ClickAsync();
            
//上面的代码无法执行，因为“翻译”链接处于隐藏状态
await page.EvaluateAsync("document.getElementsByName('tj_fanyi')[0].click()");

添加微信号【MyIO666】，邀你加入技术交流群