Playwright 指令介紹 - HackMD

<style> .center{ display: flex; justify-content: center; } .txt_color{ color: #224499; } .split_line{ border-bottom-style: solid; border-width: 1px; border-color: #999999; } .txt_center{ text-align: center; } .txt_underline{ text-decoration:underline; } </style> # Playwright 指令介紹 <div class='txt_center'> 下面看到的 google.com 為指令中的網址, 可以自己替換目標 </div> ### 使用 playwright 錄製操作內容 ```script playwright codegen google.com ``` <div class="center"> <img src="https://i.imgur.com/3ng54g2.png"> </div> <br> <div>將登入資訊存在 json 檔案</div> ```script playwright codegen --save-storage=filename.json google.com ``` <div>讀取 json cookie 資訊</div> ```script playwright codegen --load-storage=filename.json google.com ``` ### 指定瀏覽器開啟頁面 <div class="txt_color">Chromium</div> ```script playwright cr google.com ``` <div>錄製</div> <div class="center"> playwright codegen google.com --browser chromium </div> <div class="split_line"></div> <br> <div class="txt_color">Firefox</div> ```script playwright ff google.com ``` <div>錄製</div> <div class="center"> playwright codegen google.com --browser firefox </div> <div class="split_line"></div> <br> <div class="txt_color">WebKit</div> ```script playwright wk google.com ``` <div>錄製</div> <div class="center"> playwright codegen google.com --browser webkit </div> <div class="split_line"></div> ### 指定設備開啟頁面 ```script playwright open --device="iPhone 12" wikipedia.org ``` <div>錄製</div> <div class="center"> playwright codegen google.com --device="iPhone 12"</div> <div class="split_line"></div> ### 指定視窗大小開啟頁面 ```script playwright open --viewport-size=1280,800 google.com ``` ### 指定地理位置 ```script playwright open --timezone="Asia/Taipei" --geolocation="24.2464654,120.542827,21z" --lang="zh-Tw" maps.google.com ``` 需要自己再按下定位按鍵才會移動到指定位置!<img src="https://i.imgur.com/6RcMEP6.png" width="20" height="20"> ### Pytest 執行 Playwright <div class='txt_center'> 先將路徑前進到測試檔案所在位置 </div> <div >執行測試檔</div> ```script pytest ``` <div >顯示執行畫面</div> ```script pytest --headed ``` <div >在多個瀏覽器執行測試</div> ```script pytest --browser firefox --browser chromium --browser webkit ``` <div >以較慢的速度執行測試</div> ```script pytest --headed --slowmo 200 ``` <div >指定 function 執行</div> <span class="txt_underline">test_num.py</span> ```python def test_aaa(): assert 1 == 1 def test_b(): assert 1+1 == 2 def test_aaa_(): assert 2*2 == 4 ``` <div>只執行 test_aaa()</div> <div class="center"> pytest test_num.py::test_aaa</div> <div class="split_line"></div> <br> <div>執行名稱中包含 aaa 的測試</div> <div class="center"> pytest test_num.py -k aaa</div> <div class="split_line"></div> <br> [Pytest補充](https://learning-pytest.readthedocs.io/zh/latest/doc/test-function/mark.html) <hr>  ###### tags: `Playwright` `End to End`