胖胖的點人生

先簡單介紹什麼是 Playwright

Playwright 是一套 open source 跨平台、跨語言支援在瀏覽器上做 end to end 測試的框架
（有一個不知道那邊來的 中文 Playwright 頁面 要注意一下不要跑錯了）

一些小技巧小知識

因為現在再寫前端，所以這邊的例子都是以 javascript 的生態的範例

• config 裡面的 webserver 區段不給的話，就不會自動幫你啟動 web server，這個建議在 CI 機器上一定要加入 config ，但是在 開發者 的機器上可以不用補上這段設定，不然下測試指令都會從啟動 web server 跑起會有點浪費時間
• Playwright 有內建瀏覽器，可以使用  playwright install 安裝，詳細可以看 這邊 
• 上面的指令是安裝 playwright 內建的瀏覽器，它也有其他的指令如 playwright install chrome 是安裝 Chrome，這個指令就是去 Google 官方下載 Chrome stable 版本回來安裝，等同自己去 Google 下載 Chrome 回來安裝一樣，若此時你已經有安裝過 Chrome 的話，下這個指令會跟你說失敗。同理也有其他瀏覽器安裝的指令
• 內建瀏覽器的安裝位置可以看這邊
• Playwright 內建的瀏覽器以 Chrome 來說是 Chromium 不是 Chrome，所以會少掉一些 Chrome 才有的東西，不過以大部分情況來說，內建的瀏覽器就夠用了
• 以 Chromium 家族來說，在 config 裡面也可以指定使用外部的瀏覽器（就是你自己安裝的瀏覽器），而 Chromium 家族也包含了 edge，設定方式就是可以看 這邊的範例，把裡面的 channel 給予正確的值就可以，每個 channel 都對應到一個外部瀏覽器，所以記得有指定的話要把瀏覽器安裝好，否則會跟你說找不到流懶器；這邊補充文件沒列到 channel 的值 chrome-canary
• config 可以設定測試啟動叫起瀏覽器的相關參數，文件看這邊，幾個我有用過參數提一下 
  • ignoreDefaultArgs：可以 部分 / 全 忽略 playwright 啟動瀏覽器時會帶的啟動參數。部分忽略的方式如給予 ['--mute-audio'] 意思就是不要把 --mute-audio 的時候帶給瀏覽器
  • args：可以額外指定要帶給瀏覽器的啟動參數，官方文件也有這個 連結 說名究竟有哪些參數可以使用
• 啟動 Chrome 時候會使用哪些預設啟動參數可以看 原始碼 ，不過可以透過給予一個錯誤的 指定瀏覽器路徑的參數（executablePath） 來發現到底有哪些預設參數，下面直接列出來

'--disable-field-trial-config',
'--disable-background-networking',
'--enable-features=NetworkService,NetworkServiceInProcess',
'--disable-background-timer-throttling',
'--disable-backgrounding-occluded-windows',
'--disable-back-forward-cache',
'--disable-breakpad',
'--disable-client-side-phishing-detection',
'--disable-component-extensions-with-background-pages',
'--disable-component-update',
'--no-default-browser-check',
'--disable-default-apps',
'--disable-dev-shm-usage',
'--disable-extensions',
'--disable-features=ImprovedCookieControls,LazyFrameLoading,GlobalMediaControls,DestroyProfileOnBrowserClose,MediaRouter,DialMediaRouteProvider,AcceptCHFrame,AutoExpandDetailsElement,CertificateTransparencyComponentUpdater,AvoidUnnecessaryBeforeUnloadCheckSync,Translate',
'--allow-pre-commit-input',
'--disable-hang-monitor',
'--disable-ipc-flooding-protection',
'--disable-popup-blocking',
'--disable-prompt-on-repost',
'--disable-renderer-backgrounding',
'--disable-sync',
'--force-color-profile=srgb',
'--metrics-recording-only',
'--no-first-run',
'--enable-automation',
'--password-store=basic',
'--use-mock-keychain',
'--no-service-autorun',
'--export-tagged-pdf',
'--headless',
'--hide-scrollbars',
'--mute-audio',
'--blink-settings=primaryHoverType=2,availableHoverTypes=2,primaryPointerType=4,availablePointerTypes=4',
'--no-sandbox',
'--user-data-dir=C:\Users\User\AppData\Local\Temp\playwright_chromiumdev_profile-etNrYl',
'--remote-debugging-pipe',
'--no-startup-window

• 預設啟動瀏覽器是以 headless 的模式啟動，簡單來說就是你看不到它但是他有在執行的概念（可以看到上面有 --headless的參數），headless 模式會有一些限制，例如不會讀取 extension，所以如果要測試自己的 extension 的話就需要關閉 headless 模式；不過後來 Google 有出了一個新的 headless 模式，可以在 ignoreDefaultArgs 中指定 --headleass 並在 args 那邊指定  --headless=new 開啟新的 headeless 模式
• 如果要播放有 DRM 的影音，要在 ignoreDefaultArgs 給予幾個參數，否則會跟你說找不到所謂的 key system 而無法播放；要在 ignoreDefaultArgs 給予的參數是 --headless 及 --disable-component-update ；最重要的是 --disable-component-update 因為不給予 Chrome 這個參數才會讓 Chrome 正常的把 components 讀取進來，因為 DRM 的解密模組是 Chrome 的一個 component ，如果不讀就會看到 key system 的錯誤，但問我為什麼也要給予 --headless 其實我也不清楚，可能是 DRM 的限制，在「沒看到」東西的情況下也是不給播放的；不過如果你用了上面提到的新的 headless 模式的話，這樣播放也是沒問題的

以上，因為要解決為什麼 DRM 無法播放的狀況，而把 playwright 一些東西再看了更多一點的筆記，希望對有在玩的人有點幫助