Java Playwright 瀏覽器最大化

TechSynapse發表於2024-12-09
Java瀏覽器

Playwright 是一個用於自動化 Web 應用測試的現代工具，支援多種語言（包括 Java）及多個瀏覽器（如 Chromium、Firefox 和 WebKit）。它提供了一致的 API 來控制瀏覽器行為，其中包括視窗操作，如最大化。本文將詳細介紹如何在 Java Playwright 中實現瀏覽器視窗的最大化，並提供詳細的程式碼示例。

方法一

一、理論概述

  1. Playwright 簡介

    Playwright 是一種自動化測試工具，透過直接與瀏覽器程序通訊，傳送和接收命令來控制瀏覽器行為。它提供了豐富的 API，可以模擬使用者操作，如點選、輸入、導航等，非常適合用於 Web 測試自動化、UI 相容性測試和資料採集。

  2. 視窗最大化需求

    在自動化測試中，視窗最大化是一個常見的需求。這有助於確保在最大化視窗時，網頁佈局仍然符合設計預期，驗證應用程式在不同螢幕尺寸下的表現，以及獲取更全面的資訊。

  3. 實現方式

    Playwright 本身沒有提供一個直接的 maximize 方法來最大化視窗，但可以透過設定瀏覽器的 viewportSize 來模擬視窗的最大化。此外，還可以透過 JavaScript 程式碼來調整視窗的大小。

二、環境準備

  1. 安裝 Node.js

    確保你的開發環境中已經安裝了 Node.js。你可以從 Node.js 官方網站 下載並安裝適合你作業系統的版本。

  2. 安裝 Playwright

    透過 npm 安裝 Playwright：

    bash複製程式碼

npm install -g playwright

  3. 新增 Java 依賴

    如果你使用的是 Maven 專案，可以在 pom.xml 檔案中新增以下依賴：

    <dependency>
    <groupId>com.microsoft.playwright</groupId>
    <artifactId>playwright</artifactId>
    <version>1.20.0</version>
</dependency>

    如果是 Gradle 專案，可以在 build.gradle 檔案中新增以下依賴：

    dependencies {
    implementation 'com.microsoft.playwright:playwright:1.20.0'
}

三、實現步驟

  1. 初始化 Playwright 和 Browser

    首先，初始化 Playwright 並啟動瀏覽器。然後，在瀏覽器啟動後，將視窗最大化。

  2. 設定視口大小

    透過 page.setViewportSize() 方法設定一個足夠大的視口尺寸來模擬最大化瀏覽器視窗。通常，你可以將視口大小設定為螢幕的解析度。

  3. 使用 JavaScript 程式碼調整視窗大小

    透過 page.evaluate() 方法在瀏覽器上下文中執行 JavaScript 程式碼，調整視窗的大小。

四、程式碼示例

以下是一個完整的 Java 程式碼示例，展示瞭如何在 Playwright 中實現瀏覽器視窗的最大化。

import com.microsoft.playwright.*;
 
import java.awt.*;
 
public class BrowserMaximizeExample {
    public static void main(String[] args) throws AWTException {
        // 獲取螢幕解析度
        Toolkit toolkit = Toolkit.getDefaultToolkit();
        Dimension screenSize = toolkit.getScreenSize();
        int screenWidth = screenSize.width;
        int screenHeight = screenSize.height;
 
        // 啟動 Playwright
        try (Playwright playwright = Playwright.create()) {
            // 啟動瀏覽器（推薦使用 Chromium）
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
 
            // 建立瀏覽器上下文和頁面
            BrowserContext context = browser.newContext();
            Page page = context.newPage();
 
            // 設定瀏覽器視窗為螢幕解析度大小
            page.setViewportSize(screenWidth, screenHeight);
 
            // 開啟網頁
            page.navigate("https://www.example.com");
 
            // 使用 JavaScript 程式碼將視窗大小調整為螢幕大小（可選）
            // 注意：在某些情況下，這一步可能是多餘的，因為 setViewportSize 已經設定了視口大小
            // 但為了確保視窗最大化，可以新增以下程式碼
            page.evaluate("() => {" +
                    "window.moveTo(0, 0);" +
                    "window.resizeTo(screen.width, screen.height);" +
                    "}");
 
            // 列印當前視口大小，以確認視窗已最大化
            System.out.println("Viewport size: " + page.viewportSize().width + "x" + page.viewportSize().height);
 
            // 等待一些時間，保持瀏覽器視窗開啟
            page.waitForTimeout(5000);
 
            // 關閉瀏覽器
            browser.close();
        }
    }
}

五、程式碼說明

  1. 獲取螢幕解析度

    使用 Java 的 Toolkit 類獲取螢幕解析度，並將其儲存在 screenWidth 和 screenHeight 變數中。

  2. 啟動 Playwright

    使用 Playwright.create() 方法建立一個新的 Playwright 例項。

  3. 啟動瀏覽器

    使用 playwright.chromium().launch() 方法啟動一個 Chromium 瀏覽器例項。setHeadless(false) 表示啟用有頭模式，這樣你可以看到瀏覽器的介面。

  4. 建立瀏覽器上下文和頁面

    使用 browser.newContext() 方法建立一個新的瀏覽器上下文，並使用 context.newPage() 方法開啟一個新的瀏覽器頁面。

  5. 設定視口大小

    使用 page.setViewportSize(screenWidth, screenHeight) 方法設定瀏覽器的視口大小，這裡將其設定為螢幕解析度大小。

  6. 開啟網頁

    使用 page.navigate("https://www.example.com") 方法開啟一個網頁。

  7. 使用 JavaScript 程式碼調整視窗大小（可選）

    在某些情況下，你可能需要使用 JavaScript 程式碼進一步調整視窗大小。這裡使用 page.evaluate() 方法在瀏覽器上下文中執行 JavaScript 程式碼，將視窗移動到螢幕左上角，並調整其大小為螢幕解析度。

  8. 列印當前視口大小

    使用 page.viewportSize() 方法獲取當前視口的大小，並列印出來，以確認視窗已最大化。

  9. 等待一些時間

    使用 page.waitForTimeout(5000) 方法等待一些時間，保持瀏覽器視窗開啟。這樣你可以手動檢視視窗是否已最大化。

  10. 關閉瀏覽器

    使用 browser.close() 方法關閉瀏覽器例項。

六、結論

透過以上步驟和程式碼示例，你可以在 Java Playwright 中實現瀏覽器視窗的最大化。這有助於確保在最大化視窗時，網頁佈局仍然符合設計預期，驗證應用程式在不同螢幕尺寸下的表現，以及獲取更全面的資訊。希望本文對你有所幫助，祝你在自動化測試中取得更好的成果！

方法二

使用 JavaScript 執行視窗最大化操作

雖然 Playwright 本身沒有提供一個直接的 maximize 方法，但你可以透過 page.evaluate() 方法在瀏覽器上下文中執行 JavaScript 程式碼來實現視窗的最大化。以下是一個示例程式碼：

import com.microsoft.playwright.*;
 
public class MaximizeBrowserWithJavaScript {
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
            // 啟動瀏覽器（以 Chromium 為例）
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
            
            // 建立頁面
            Page page = browser.newPage();
            
            // 導航到目標網頁
            page.navigate("https://www.example.com");
            
            // 使用 JavaScript 最大化視窗
            page.evaluate("() => {" +
                    "window.moveTo(0, 0);" + // 將視窗移動到螢幕左上角
                    "window.resizeTo(screen.availWidth, screen.availHeight);" + // 調整視窗大小為螢幕可用寬度和高度
                    "}");
            
            // 等待一些時間，以便觀察視窗是否最大化
            page.waitForTimeout(5000);
            
            // 關閉瀏覽器
            browser.close();
        }
    }
}

在這個示例中，window.moveTo(0, 0) 將視窗移動到螢幕的左上角，而 window.resizeTo(screen.availWidth, screen.availHeight) 則將視窗大小調整為螢幕的可用寬度和高度，從而實現最大化效果。

方法三

結合作業系統 API 獲取螢幕解析度並設定

如果你需要更動態地設定瀏覽器視窗大小，可以結合 Java 的 Toolkit 類來獲取螢幕解析度，並將其設定為瀏覽器視窗的大小。這種方法在前面的示例中已經展示過，但這裡再次強調其步驟：

  1. 使用 Toolkit.getDefaultToolkit().getScreenSize() 獲取螢幕解析度。
  2. 使用 page.setViewportSize(screenWidth, screenHeight) 設定瀏覽器視口大小為螢幕解析度。

這種方法的好處是能夠根據當前裝置的螢幕解析度動態調整瀏覽器視窗大小，從而更真實地模擬使用者在不同裝置上的瀏覽體驗。

注意事項

  • 平臺相容性：上述方法適用於大多數桌面瀏覽器，但在某些特殊情況下（如移動裝置模擬）可能需要不同的處理方式。
  • 瀏覽器限制：某些瀏覽器或瀏覽器配置可能會限制視窗大小調整，因此在實際應用中可能需要根據具體情況進行調整。
  • 效能考慮：頻繁地調整視窗大小可能會對測試效能產生影響，因此建議在必要時才進行此類操作。

綜上所述，透過 JavaScript 執行視窗最大化操作或結合作業系統 API 獲取螢幕解析度並設定是除了設定視口大小之外的其他實現方式。在實際應用中，你可以根據具體需求和測試環境選擇合適的方法來實現瀏覽器視窗的最大化。

相關文章