# aardio 范例: web.view( WebView2 ) 等待并自动化操作网页元素



```aardio
//web.view 自动化操作网页
//请参考调用 CDP 实现自动化:https://www.aardio.com/zh-cn/docs/examples/WebUI/web.view/DevTools/cdp.html
import win.ui;
/*DSG{{*/
var winform = win.form(text="web.view( WebView2 ) 等待并自动化操作网页元素";right=757;bottom=467)
winform.add()
/*}}*/

import web.view;
var wb = web.view(winform);

wb.go("https://www.aardio.com/zh-cn/docs/");

//用法 1：异步等待参数 @1 指定 CSS 选择器的 HTML 元素，回调 aardio 函数
wb.waitEle("#search-input",function(ok,err){
	wb.doScript("
		var searchInput = document.querySelector('#search-input');
		
		//searchInput.value='多线程'; 
		//searchInput.dispatchEvent(new Event('input', { bubbles: true}));
		
		searchInput.focus(); // 必须先聚焦
   		searchInput.select(); // 选中当前所有内容（用于覆盖旧内容）
   		
    	// 执行插入文本命令
    	document.execCommand('insertText', false, text);
	")
})

/*
有些网页直接用 input.value="文本" 不起作用，原理与解决方案请查看
网页自动化输入指南: https://www.aardio.com/zh-cn/docs/library-guide/std/web/view/input.html
*/

//用法 2：参数 @2 不指定回调函数或回调 JS 脚本则同步等待参数 @1 指定 CSS 选择器的 HTML 元素
wb.waitEle("#search-input");

/*
wb.waitEle 在单个网页内有效，打开其他网页则会取消等待。
如果在等待时网页可能跳转网址，可改用 wb.waitEle2 函数以支持跨网页等待。
wb.waitEle2 与 wb.waitEle 的参数用法是一样的。

参考 lmarena 工具: https://www.aardio.com/zh-cn/docs/examples/AI/lmarena.html
*/

/*
wb.waitEle,waitEle 兼容强大的 XPATH 表达式，
参数 @1 首字符为 / 或 （ 则识别为 XPATH 。

XPath 快速入门范例: https://www.aardio.com/zh-cn/docs/examples/WebUI/web.view/XPath.html
*/
wb.waitEle("//*[@id='search-input'][1]",`
	this.value='多线程 XPATH'; 
	this.dispatchEvent(new Event('input', { bubbles: true, })); 
`)

//执行 JavaScript 脚本
wb.doScript("
var searchInput = document.querySelector('#search-input');
searchInput.value='多线程'; 
searchInput.dispatchEvent(new Event('input', { bubbles: true, }));
")

winform.show(3/*_SW_SHOWMAXIMIZED*/);
win.loopMessage();
```