Protractor+Cucumber登录表单sendKeys失效及页面同步错误求助

Hey there! I’ve run into this exact problem when testing non-Angular pages with Protractor—let’s get your login test working properly.

Core Problem Explanation #

The error you’re seeing is the key clue: Protractor is built to automatically sync with Angular apps by default. Since your login page isn’t using Angular (or jQuery, as you mentioned), Protractor gets stuck waiting for Angular-specific testability hooks that don’t exist. This breaks element interactions (like setting form values or clicking buttons) because the test tries to act before the page is ready in Protractor’s context.

1. Update Your Protractor Config (conf.js) #

First, we need to disable Angular synchronization and tweak some settings to play nice with non-Angular pages. Here’s a revised config with key fixes:

exports.config = {
  framework: 'cucumber',
  specs: ['./features/**/*.feature'],
  cucumberOpts: {
    require: ['./step-definitions/**/*.js'],
    format: 'pretty'
  },
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: ['--no-sandbox'] // Optional, helps with some environment issues
    }
  },
  onPrepare: function() {
    // Disable Angular synchronization for non-Angular pages
    browser.waitForAngularEnabled(false); // Use this for Protractor v5+
    // For older versions, use: browser.ignoreSynchronization = true;

    // Set a reasonable implicit wait (helps with element loading)
    browser.manage().timeouts().implicitlyWait(10000);

    // Maximize browser window to avoid element visibility issues
    browser.driver.manage().window().maximize();
  }
};

Key Changes: #

• browser.waitForAngularEnabled(false): Tells Protractor not to wait for Angular’s testability hooks.
• Implicit wait: Gives elements time to load before the test tries to interact with them.
• Window maximize: Prevents elements from being hidden off-screen (a common cause of unresponsive clicks).

2. Revise Your Step Definitions #

Even with the config fixed, you’ll want to use explicit waits to ensure elements are fully ready before interacting with them. This avoids race conditions where the test tries to type/click before the element is interactive.

Here’s an example of fixed step definitions for your login flow:

const { Given, When, Then } = require('cucumber');
const { browser, element, by, ExpectedConditions } = require('protractor');

// Define reusable wait conditions
const waitForElementToBeClickable = (locator) => {
  return browser.wait(ExpectedConditions.elementToBeClickable(locator), 15000);
};

const waitForElementToBeVisible = (locator) => {
  return browser.wait(ExpectedConditions.visibilityOf(locator), 15000);
};

Given('I am on the login page', async () => {
  await browser.get('https://your-login-page-url.com'); // Replace with your actual URL
});

When('I enter username {string} and password {string}', async (username, password) => {
  // Wait for username field to be visible before typing
  const usernameField = element(by.css('#username')); // Replace with your actual locator
  await waitForElementToBeVisible(usernameField);
  await usernameField.clear();
  await usernameField.sendKeys(username);

  // Do the same for password field
  const passwordField = element(by.css('#password')); // Replace with your actual locator
  await waitForElementToBeVisible(passwordField);
  await passwordField.clear();
  await passwordField.sendKeys(password);
});

When('I click the submit button', async () => {
  // Wait for button to be clickable before clicking
  const submitBtn = element(by.css('#submit-btn')); // Replace with your actual locator
  await waitForElementToBeClickable(submitBtn);
  await submitBtn.click();
});

Then('I should be redirected to the dashboard', async () => {
  // Wait for the dashboard URL to load
  await browser.wait(ExpectedConditions.urlContains('/dashboard'), 15000);
});

Key Fixes Here: #

• Explicit waits: Using ExpectedConditions ensures elements are ready (visible/clickable) before any interaction.
• Clear fields first: Prevents leftover text from interfering with your input.
• URL validation: Uses a wait to confirm the redirect happened instead of checking immediately.

3. Quick Checks to Rule Out Other Issues #

• Double-check your element locators: Make sure by.css('#username') (or whatever locator you use) correctly targets the form fields/button. You can test locators in Chrome DevTools’ console with document.querySelector('#username').
• Ensure there are no overlapping elements (like modals or overlays) blocking the submit button—this would cause clicks to fail silently.
• If you’re using an older Protractor version, swap browser.waitForAngularEnabled(false) with browser.ignoreSynchronization = true.

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