### ==Checkbox==
若要勾選畫螢光的三個checkbox，須先定位到勾選框再click()將其勾選，我們可以透過GOOGLE工具-檢查並使用CONSOLE驗證。




page.locator('.maincheckbox.ng-binding').nth(0).click()

### ==Table==

若要選擇表格內的某一列某一行，一樣先透過右鍵選擇檢查，我會先找到table的名稱，再選擇要定位哪一行列，tr為行，td為欄


==舉例==
選擇第二行第二欄，一樣可以使用console確認定位


page.locator('#datatable tr:nth-child(2) > td:nth-child(2)').inner_text() #獲取欄位內文字

<br/>

### ==選單==
有三種形式的選單，下拉選單、有序選單&無序選單
透過html可以查看標籤為<select>下拉選單，<ul-li>無序選單<ol-li>有序選單

**1.下拉選單**
可看到選項為option，可透過:選項名稱\value\index\label來選取選項


select_list=page.get_by_test_id('selectDevice')
select_list.select_option('string:236')

**2.ul/ol選單**
有的是[點選]或[滑鼠懸停]才會展開選單。
==第一種點擊展開選單==
如下圖所示ul為選單 li是選單內的選項，(1)定位到選單(2)定位到選項(li)，可先使用瀏覽器提供的console介面嘗試是否可定位到。



透過css語法定位，li可能會有多個選項，使用:nth-child()選擇
page.locator('ul.sidebar-list li:nth-child(2)').click()

==第二種懸停選單==
滑鼠停留在選單位置，選單將自動展開如下圖，我需將滑鼠停留在...位置，先於網頁找到...元素位置


點擊右鍵>檢查 可查看到元素，指到css時網頁也會顯示區塊，這也可以驗證說定位到的範圍，移到下方a標籤也可看到定位到...這元素，但a標籤包在li選單內，通常兩個都能定位到，我會直接選擇定位外面的大項。


透過CSS定位，可以發現使用li.amcharts-amexport-item會定位到四個元素...與裡面的選項，這時可透過.nth()選擇或css後面-blank不同的地方定位


page.locator('li.amcgarts-amexport-item').nth(0).hover() 或
page.locator('li.amcgarts-amexport-item-blank').hover()

### ==日曆選擇器(DatePicker)==


通常日曆選擇器都是需要用點選的方式，點選年月<>等按鈕定位不易，通常我會使用page.evaluate()這個api，使用javascript將輸入框的readonly屬性刪除後，透過fill()的方式輸入日期，一樣在日期選單點選右鍵檢查查看元素，可看到一個input輸入框後面帶有readonly屬性。


我們可以從console介面先執行一次

再返回到元素檢查頁面確認是否readonly標籤已被刪除

js="""
document.getElementById('dateTimePicker').removeAttribute("readonly");"""
#若輸入框沒有id也可透過css/tagname
page.evaluate(js)
input_date=page.locator('#dateTimePicker')
input_date.fill('2024-01-27')

若使用fill選擇無法更新前段顯示結果
一樣可透過javascript變更值

js="""
    document.getElementById('dateTimePicker').removeAttribute("readonly");
    //刪掉輸入框Readonly屬性
    """
    page.evaluate(js)
    
date=f"""
        var element = document.getElementById('dateTimePicker');
        element.value = '{year}-{month}-{date}'; //日期設計為變數
        element.dispatchEvent(new Event('change',{{bubbles:true}}));//觸發事件
"""
    page.evaluate(date)