如何使用Protractor测试全屏开启/关闭切换？行业新手求助

Hey there! I totally get your frustration—browser.manage().window().maximize() only resizes the browser to its maximum available size, which isn't the same as the native fullscreen mode you get when clicking a dedicated toggle button. Let's walk through how to properly test the enter/exit fullscreen flow with Protractor.

Step 1: Locate Your Fullscreen Toggle Element #

First, you'll need to target the button/UI element that triggers fullscreen mode. Use standard Protractor locators to grab it:

const fullscreenToggle = element(by.css('[data-testid="fullscreen-button"]')); // Adjust locator to match your app's actual selector

Step 2: Test Entering Fullscreen Mode #

After clicking the toggle, you need to verify that the browser (or a specific element) has entered fullscreen. Browsers expose the document.fullscreenElement property for this—if it's not null, fullscreen is active. Since this is a browser API, we'll use browser.executeScript() to access it directly:

// Click to trigger fullscreen mode
await fullscreenToggle.click();

// Verify fullscreen is active (add prefixes for broader browser compatibility)
const isInFullscreen = await browser.executeScript(() => {
  return !!document.fullscreenElement || 
         !!document.webkitFullscreenElement || 
         !!document.mozFullscreenElement || 
         !!document.msFullscreenElement;
});
expect(isInFullscreen).toBe(true);

Step 3: Test Exiting Fullscreen Mode #

Next, simulate clicking the toggle again to exit fullscreen, then verify the status is back to normal:

// Click to exit fullscreen mode
await fullscreenToggle.click();

// Verify fullscreen is inactive
const isNotInFullscreen = await browser.executeScript(() => {
  return !document.fullscreenElement && 
         !document.webkitFullscreenElement && 
         !document.mozFullscreenElement && 
         !document.msFullscreenElement;
});
expect(isNotInFullscreen).toBe(true);

Important Notes #

• Browser Security Restrictions: Most browsers require a user-initiated action (like a click) to trigger fullscreen. Avoid trying to call requestFullscreen() directly via executeScript—this will likely be blocked by browser security rules. Always simulate a click on your UI element instead.
• Element-Specific Fullscreen: If your app makes a specific element (e.g., a video player or content container) fullscreen instead of the entire document, adjust the check to verify that element is the active fullscreen element:

  const targetElement = element(by.id('content-container'));
  const isElementFullscreen = await browser.executeScript((element) => {
    return element === document.fullscreenElement;
  }, targetElement.getWebElement());
  expect(isElementFullscreen).toBe(true);
  

内容的提问来源于stack exchange，提问作者Deepika