要執行自動化測試，我們須先定位到頁面上的元素，才可以對元素執行基本的操作，那以下來說明playwright的定位器。 ==查找元素== 可透過瀏覽器，開發人員工具看到網頁的html，於網頁上針對想定位的元素案右鍵點選[檢查]，可看到元素類型、class、ID、Name等等可以使用這些標籤定位。 ![](https://hackmd.io/_uploads/SJ0Fpwf5n.png =100%x) ![image](https://hackmd.io/_uploads/ryY5oO1qp.png =30%x) ---- #### 1.CSS定位 ![](https://hackmd.io/_uploads/ByWQvdX52.png =50%x) ![](https://hackmd.io/_uploads/r1XQuOm92.png =60%x) ```python! page.loctor('.maininput.valid')#透過class page.locator('#userID') #透過ID ``` #### 2.XPATH定位 ```htmlmixed! //*[@id="UserID"] #透過ID //*[@id="datatable"]/tbody/tr/td[3] #定位表格第三欄 ``` 錯誤示範： 這種多階層定位若層級一改就定位不到，不建議使用! ```htmlembedded! /html/body/div[3]/div[1]/div[3]/div/section[1]/div/ul/li[1]/div[1] ``` xpath語法可參考：https://devhints.io/xpath #### 3.角色定位 ✔️get_by_role() 使用元素的類型來定位，如下圖舉例的元素類型 ![](https://hackmd.io/_uploads/BkuM1FX9h.png =15%x) ```python! page.get_by_role('button',name="搜尋").click() page.get_by_role('ceckbox',name="19").click() ``` ✔️get_by_label() 透過html的label標籤定位 ![](https://hackmd.io/_uploads/rkDdQKX5h.png) ```python! page.get_by_label('使用者ID') page.get_by_label('密碼') ``` ✔️get_by_text() 使用元素的可見文字來定位 ![](https://hackmd.io/_uploads/SksSBFm9h.png =15%x) ![](https://hackmd.io/_uploads/Hk5-NK75h.png) ```python! page.get_by_text('登入') ``` ✔️get_by_placeholder() 使用輸入框的預設文字 ![](https://hackmd.io/_uploads/HkXZ_FQ9h.png =40%x) ```python! page.get_by_placeholder('請輸入公司代碼').fill('a01') page.get_by_placeholder('請輸入帳號').fill('root') ``` ✔️get_by_test_id() ![](https://hackmd.io/_uploads/Syx3cFXch.png) 使用data-testid定位，data-testid本身就是為了測試而增加的一個標籤屬性，相較其他屬性不會隨意變動，盡量以data-testid作為第一選擇，若透過文字、標籤等改變文字就無法定位。 ```python! page.get_by_testid('searchType').select_option('冷氣') ``` #### 4.組合定位 playwright支援組合定位及多層級定位。 css+xpath : ```python! page.locator('#datatable').locator('//tbody/tr/td') page.locator('#datatable > //tody/tr/td ') ``` css+css ```python! page.locator('select [ng-model="searchModel.Merchant_id"]') page.loccator('select').locator('[ng-model="searchModel.Merchant_id"]') ``` ==舉例== 我要點擊模態框上的確定，因playwright也能搜尋hidden元素，就算沒出現在當前頁面也能定位，所以如果有相同名稱元素須準確定位，那我們可以先定位到模態框再定位模態框上面的button。 ![](https://hackmd.io/_uploads/ByUDIsQ9n.png =50%x) ```python page.locator('#makesureModal').get_by_role('button',name='確定').click() # 等同於 modal=page.locator('#makesureModal') modal.get_by_role('button',name='確定').click() ``` #### 5.Selector選擇器 selector是使用css選擇，這種選擇器有兩種形式 ```python! page.query_selector()#單個元素，若有多個匹配元素，會選擇第一個匹配元素 page.query_selector_all() #匹配多個元素 ``` ==舉例== 我現在想將選單內的選項都一一選擇一次進行查詢 ```python! option_list=page.query_selector_all('[data-testid="selectDevice"] > option') #將所有匹配元素儲存為列表，返回的是元素句柄ElementHandle非一般dom元素，需再做處理。 values=[option.get_attribute'label']for option in option_list] #獲取剛剛匹配的元素的指定屬性值label，儲存為列表，這個才為dom元素可直接使用。 for value in values: page.locator('#selectDevice').select_option(value) page.get_by_role('button',name='搜尋').click() ..... ```