一、背景

從 Web 誕生之日起，UI 自動化就成了測試的難點(diǎn)，到現(xiàn)在近 30 年，一直沒有有效的手段解決Web UI測試的問題，盡管發(fā)展了很多的 webdriver 驅(qū)動，圖片 diff 驅(qū)動的工具，但是這些工具的投入產(chǎn)出比一直被質(zhì)疑，自動化率越多維護(hù)成本越高，大部分都做著就放棄了，還有一部分在做與不做間糾結(jié)。

本文結(jié)合一些開源的項(xiàng)目探索使用GPT 自動做 UI 測試的可能性。

二、方案選型

當(dāng)前UI 的主要問題：一個是通過 Webdriver 控制瀏覽器執(zhí)行，這些工具都需要先查找到對應(yīng)元素的 Elements，無論是錄制的還是自己編寫的在面對 UI 變化，元素變化時都需要耗費(fèi)很大的精力去重新識別，解析 Dom 查找，這個工作乏味且沒有效率；另一種是通過圖像進(jìn)行點(diǎn)擊，比如 Sikuli 這種工具，主要的問題也是復(fù)用性較差，換個分辨率的機(jī)器或者圖片發(fā)生少的改動就不可用。

使用 GPT 做 UI 測試嘗試了兩種方案：

第一種將 Html 元素投喂給 GPT，主要方法獲取 Html代碼，對 Html 做初步縮減處理，再做向量化，然后喂給 GPT4 自動生成 Webdriver 驅(qū)動腳本，效果一般，而且因?yàn)?Html 比較大，Token 的消耗很大。

第二種思路是讓 GPT 像人一樣思考和測試，比如一個人打開一個網(wǎng)頁后，他通過眼睛看到的頁面文字或圖標(biāo)，然后用手完成點(diǎn)擊和輸入的操作，最后通過頁面的彈窗或者文字來識別是否有錯誤，這幾個動作通過大腦統(tǒng)一協(xié)調(diào)。

這里主要介紹第二種.

三、新方案實(shí)踐

1.新方案簡介

新的方案主要結(jié)合 Playwright，SoM視覺標(biāo)記，GPT4Vison，GPT4，AutoGen來實(shí)現(xiàn)。主要的原理

通過 Playwright進(jìn)行瀏覽器操作，包括頁面圖像的獲取、瀏覽器的各種操作，相當(dāng)于‘‘手’’；

進(jìn)行SoM 視覺數(shù)據(jù)標(biāo)記，因?yàn)?GPT4Vison 在進(jìn)行頁面原始識別時并不是很準(zhǔn)確，參考微軟的論文可以通過視覺標(biāo)記的手段來輔助 GPT4V 識別，相當(dāng)于“眼睛”。

通過GPT4+AutoGen 將這些步驟串起來實(shí)現(xiàn)協(xié)調(diào)控制，相當(dāng)于“大腦”和“神經(jīng)中樞”。

2.主要架構(gòu)

?

3.實(shí)現(xiàn)步驟

1. 使用 Playwright 注入 JS

browser = playwright.chromium.launch(channel="chrome",headless=False)
context = browser.new_context()
page = context.new_page()
page.goto("http://oa.jd.com/")
inject_js ="./pagemark.js"
withopen(inject_js,'r')asfile:
    content =file.read()
    page.evaluate(f"{content}")

2. SoM 視覺提示標(biāo)記

如前文提到的 GPT4V 并不能有效的識別 Web 的元素，所以在使用 GPT4V 之前進(jìn)行圖像標(biāo)記，圖像標(biāo)記現(xiàn)在有兩種方式，一種是通過 AI 識別圖片進(jìn)行標(biāo)記，這種主要利用在對靜態(tài)圖片圖像的識別，對于 Web 頁面的標(biāo)記，我們可以采用注入 JS 修改頁面元素的方式來標(biāo)記。這里通過在瀏覽器中注入 pagemark.js，利用 Playwright 執(zhí)行 js 函數(shù)來完成頁面的標(biāo)記，該 JS 能夠完成標(biāo)準(zhǔn)的coco annotation的標(biāo)注。

// DOM Labelerlet labels =[];functionunmarkPage(){
 for(const label of labels){
 document.body.removeChild(label);
 }

 labels =[];
 }

 functionmarkPage(){
 unmarkPage();
 
 var bodyRect = document.body.getBoundingClientRect();

 var items =Array.prototype.slice.call(
 document.querySelectorAll('*')
 ).map(function(element){
 var vw = Math.max(document.documentElement.clientWidth ||0, window.innerWidth ||0);
 var vh = Math.max(document.documentElement.clientHeight ||0, window.innerHeight ||0);
 
 var rects =[...element.getClientRects()].filter(bb=>{
 var center_x = bb.left + bb.width /2;
 var center_y = bb.top + bb.height /2;
 var elAtCenter = document.elementFromPoint(center_x, center_y);
  
  return elAtCenter === element || element.contains(elAtCenter) 
 }).map(bb=>{
 const rect ={
 left: Math.max(0, bb.left),
 top: Math.max(0, bb.top),
 right: Math.min(vw, bb.right),
 bottom: Math.min(vh, bb.bottom)
  };
  return{
 ...rect,
 width: rect.right - rect.left,
 height: rect.bottom - rect.top
  }
  });

  var area = rects.reduce((acc, rect)=> acc + rect.width * rect.height,0);

 return{
 element: element,
 include: 
 (element.tagName ==="INPUT"|| element.tagName ==="TEXTAREA"|| element.tagName ==="SELECT")||
 (element.tagName ==="BUTTON"|| element.tagName ==="A"||(element.onclick !=null)|| window.getComputedStyle(element).cursor =="pointer")||
 (element.tagName ==="IFRAME"|| element.tagName ==="VIDEO")
 ,
 area,
 rects,
 text: element.textContent.trim().replace(/s{2,}/g,' ')
 };
 }).filter(item=>
 item.include &&(item.area >=20)
 );

 // Only keep inner clickable items
 items = items.filter(x=>!items.some(y=> x.element.contains(y.element)&&!(x == y)))

 // Function to generate random colors
 functiongetRandomColor(){
 var letters ='0123456789ABCDEF';
 var color ='#';
 for(var i =0; i {
 newElement = document.createElement("div");
 var borderColor =getRandomColor();
 newElement.style.outline =`2px dashed ${borderColor}`;
 newElement.style.position ="fixed";
 newElement.style.left = bbox.left +"px";
 newElement.style.top = bbox.top +"px";
 newElement.style.width = bbox.width +"px";
 newElement.style.height = bbox.height +"px";
 newElement.style.pointerEvents ="none";
 newElement.style.boxSizing ="border-box";
 newElement.style.zIndex =2147483647;
 // newElement.style.background = `${borderColor}80`;
 // Add floating label at the corner
 var label = document.createElement("span");
 label.textContent = index;
 label.style.position ="absolute";
 label.style.top ="-19px";
 label.style.left ="0px";
 label.style.background = borderColor;
 label.style.color ="white";
 label.style.padding ="2px 4px";
 label.style.fontSize ="12px";
 label.style.borderRadius ="2px";
 newElement.appendChild(label);
 
 document.body.appendChild(newElement);
  labels.push(newElement);
  console.log(index)
  
  });
  })
 }

以某系統(tǒng)為例，標(biāo)注后的效果如下圖：

將標(biāo)記元素的位置編號保存到本地coco.json

{ 
    "1":{"x":"10","y":"40","w":"8","h":"10","center_x":"30","center_y":"13"}, 
    "2":{"x":"20","y":"40","w":"16","h":"10","center_x":"30","center_y":"21"}, 
    "10":{"x":"40","y":"80","w":"16","h":"10","center_x":"80","center_y":"21"}}

其中 center_x, center_y 為元素的中心點(diǎn)坐標(biāo)

3.GPT4V 識別

Prompt

我上傳了一張網(wǎng)頁截圖，頁面元素已經(jīng)使用COCO Annotator進(jìn)行了數(shù)字標(biāo)記。
請分析這張圖片，并識別出網(wǎng)頁的用途以及各個標(biāo)記元素的功能。基于你的分析，請生成一個規(guī)劃路徑來完成以下任務(wù)：
- 輸入ERP搜索。            
- 檢查列表是否為空            
請使用圖片中的數(shù)字標(biāo)記來描述完成任務(wù)的具體步驟。

GPT4V Response

這張圖片顯示的是一個具有多個數(shù)字標(biāo)記的網(wǎng)頁截圖。根據(jù)這些標(biāo)記，我們可以推測出網(wǎng)頁的用途以及各個元素的功能。
為了完成您提出的任務(wù)，我們可以按照以下步驟操作：
nn1. 使用標(biāo)記為10的搜索框輸入ERP搜索詞。這個搜索框的標(biāo)簽顯示為“搜索框輸入erp”，表明它用于輸入搜索詞。
nn2. 點(diǎn)擊標(biāo)記為17的搜索按鈕。這個按鈕的標(biāo)簽是“搜索”，表明它用于提交搜索請求。
nn3. 檢查列表是否為空。這個步驟可能需要查看標(biāo)記為19的區(qū)域，這個區(qū)域被標(biāo)記為“列表內(nèi)容”，如果這個區(qū)域沒有顯示任何內(nèi)容或者有提示信息顯示列表為空，則說明搜索結(jié)果為空。
nn以 上步驟基于圖片中的數(shù)字標(biāo)記和元素標(biāo)簽來描述完成任務(wù)的具體操作。"

提取元素坐標(biāo)

利用正則表達(dá)式從GPT4V 的 response 中提取查詢到的元素的 bbox id= 10，17,19, 結(jié)合在 SoM 標(biāo)記中記錄的 json 文件，找到編號 10 的元素坐標(biāo)"10":{"x":"40","y":"80","w":"16","h","10","center_x":"80","center_y":"21"}

class GPT4VRecognize
     def get_location(self, query):  
         coco_json='./coco.json'
         withopen(coco_json,'r') as file: 
             content =file.read() 
         matches=re.findall(r'd+',gpt4v_response_content)
         num=-1
         iflen(matches)>0:
             num=matches[0]
         data = json.loads(json_str) 
         center_x = data[num]["center_x"]
         center_y = data[num]["center_y"]
         return center_x,center_y
  

4.Playwright操作頁面

Playwright是一個非常強(qiáng)大的操作瀏覽器的工具，這里因?yàn)榍懊嬉呀?jīng)通過 GPT4V 識別了圖片，所以我們主要通過 坐標(biāo) 的方式來控制元素，不再需要解析Dom 來控制，主要的包括，點(diǎn)擊，雙擊，鼠標(biāo)拖動，輸入，截圖等：

class Actions:
    page=None
    __init__(self,url):
        global page
        browser = playwright.chromium.launch(channel="chrome",headless=False)
        context = browser.new_context()
        page = context.new_page()
        page.goto("http://oa.jd.com/")
    def mouse_move(self,x,y):
        page.mouse.move(self,x,y)
    def screenshot(self):
        page.screenshot()
    def mouse_click(self,x,y):
        page.mouse.click(self,x,y)
    def input_text(self,x,y,text):
        page.mouse.click(self,x,y)
        page.keyboard.type(text) 
    def mouse_db_click(self,x,y):
    def select_option(self,x,y,option):
    ......

5.使用 AutoGen編排

AutoGen是一個代理工具，它能夠代理多個 LLM在不同會話間切換，能夠自動的調(diào)用預(yù)定的函數(shù)，并協(xié)調(diào)這些 LLM 完成任務(wù)。

在上面的程序中，實(shí)現(xiàn)了：眼睛：通過 GPT4V 來識別元素；手：通過 Playwright 來做各種操作；后面需要通過一個大腦來協(xié)調(diào)手、眼完成任務(wù)，這里通過 GPT4+AutoGen 來實(shí)現(xiàn)大腦的協(xié)同調(diào)度。

config_list = config_list_from_json(env_or_file="OAI_CONFIG_LIST")
assistant= autogen.AssistantAgent(
name="assistant",
system_message=
    """
    You are the orchestrator responsible for completing a task involving the UI window. 
    Utilize the provided functions to take a screenshot after each action. 
    Remember to only use the functions you have been given and focus on the task at hand.
     """,
 llm_config={"config_list": config_list},
)
 user_proxy = autogen.UserProxyAgent(
 name="brain_proxy",
 human_input_mode="NEVER",
 code_execution_config={"work_dir":"coding"},
 max_consecutive_auto_reply=10,
 llm_config={"config_list": config_list},)

action = Actions(url)
gpt4v=GPT4VRecognize()
user_proxy.register_function(
     function_map={
         "get_location": gpt4v.get_location,
         "mouse_move":action.mouse_move,
         "screenshot":action.screenshot,
         "mouse_click":action.mouse_click,
         "mouse_dbclick":action.mouse_dbclick,
         "select_option":action.select_option 
     })
def run(message_ask):
    user_proxy.initiate_chat(assistant,message=message_ask)

if __name__ =="__main__":
    run("通過 輸入erp 'wwww30' 搜索結(jié)果，并檢查是否返回空列表")
 

四、問題和后續(xù)

1.當(dāng)前的主要問題

本文主要拋磚引玉，通過一種完全按人類思維進(jìn)行 UI測試的方式，在實(shí)驗(yàn)過程中還有很多問題待解決。

1. GPT 在中文語境下識別的不太友好，在實(shí)驗(yàn)過程中對中文的 prompt 理解有誤，需要不斷的優(yōu)化 prompt，尤其是頁面中的中文元素。

2. AutoGen 對于處理預(yù)定義的動作也會有問題，需要不斷調(diào)優(yōu)。

3. GPT4V 真的很貴。

2.未來的想法

1. 將每次向 GPT4V請求的圖像識別做本地化處理，結(jié)合現(xiàn)有的一些測試方法，從而減少 Token，縮短執(zhí)行耗時。

2. 面向業(yè)務(wù)的 GPT需要不斷訓(xùn)練，將系統(tǒng)使用手冊和一有的 PRD 文檔投喂給 GPT，增強(qiáng) gpt 的系統(tǒng)識別和測試能力。

五、參考

1.Set-of-Mark Prompting Unleashes Extraordinary Visual Grounding in GPT-4V?

2.Microsoft AutoGen?

3.GPT-4V-ACT?

審核編輯 黃宇