Angular2+Protractor测试：无头Chrome弹窗处理及driver报错解决

Hey there! Let's break down how to fix that cannot find name driver error and get your confirm popups automatically approved in headless Chrome for your Angular app's Protractor tests.

Why the error happens #

In Protractor's TypeScript environment, driver isn't a global variable by default. Protractor wraps the WebDriver instance in its own browser object, which is the standard way to interact with the browser in your tests.

Fix 1: Use Protractor's browser.executeScript() (recommended) #

Instead of trying to access driver directly, use Protractor's built-in browser.executeScript() method to override the window.confirm function. This is TypeScript-friendly and won't throw a "cannot find name" error.

Add this line before clicking the button that triggers the popup:

await browser.executeScript("window.confirm = function(){return true;}");

Fix 2: Access the underlying driver via browser.driver #

If you specifically need to use the raw WebDriver instance for some reason, you can access it through browser.driver (which TypeScript recognizes):

await browser.driver.executeScript("window.confirm = function(){return true;}");

Full Test Example #

Here's how this fits into a complete test case:

import { browser, element, by } from 'protractor';

describe('Auto-approve confirm popups', () => {
  beforeEach(async () => {
    // Navigate to your target page
    await browser.get('/your-page-path');
    
    // Override confirm function to auto-return true
    await browser.executeScript("window.confirm = function(){return true;}");
  });

  it('should trigger popup and auto-confirm', async () => {
    // Click the button that launches the confirm popup
    await element(by.id('trigger-button')).click();
    
    // Add your assertion here (e.g., check if the expected action happened)
    expect(await element(by.css('.success-message')).isDisplayed()).toBe(true);
  });
});

Quick Note on Headless Chrome Setup #

Make sure your Protractor config file (usually conf.js or conf.ts) has headless mode enabled for Chrome:

exports.config = {
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: ['--headless=new', '--disable-gpu'] // Use '--headless' for older Chrome versions
    }
  },
  // Other configs like specs, framework, etc.
};

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