Protractor 5.1.2点击登录按钮超时，如何修改5000毫秒超时时间？

Hey there! Let's tackle that timeout issue you're facing when clicking the login button. I’ve run into this exact problem plenty of times with Protractor 5.x and Cucumber, so here are the key places you can adjust timeout values to resolve it:

1. Adjust Cucumber's Global Step Timeout #

Since you’re using Cucumber, the default step execution timeout is 5000ms. You can override this globally in your configuration:

• If you’re using a protractor.conf.js file, add the timeout option under cucumberOpts:

  exports.config = {
    // ... other Protractor configs
    cucumberOpts: {
      // ... other Cucumber options like features, glue paths
      timeout: 10000, // Set to 10 seconds (adjust based on your needs)
    }
  };
  

• If you have a standalone cucumber.js config file, set it there instead:

  module.exports = {
    default: {
      timeout: 10000,
      // ... other Cucumber configs
    }
  };
  

2. Set a Custom Timeout for the Specific Login Step #

If you only need to extend the timeout for the login step (not all test steps), you can add a timeout parameter directly to your step definition in homepage.step.ts:

const { When } = require("cucumber");

When('I click the login button', { timeout: 10000 }, async function () {
  // Your login button click logic here
  await element(by.id('login-button')).click(); // Replace with your actual element selector
});

This targets just this step, leaving other steps with the default timeout value.

3. Tweak Protractor's Global Timeouts #

Sometimes the issue isn’t the Cucumber step itself, but slow page loads or asynchronous operations. Adjust these core Protractor timeouts in protractor.conf.js:

exports.config = {
  allScriptsTimeout: 10000, // Timeout for all script executions in Protractor
  getPageTimeout: 10000, // Timeout for page navigation/loading
  onPrepare: function() {
    // Additional browser-level timeout settings
    browser.manage().timeouts().implicitlyWait(10000); // Wait for elements to appear in the DOM
    browser.manage().timeouts().pageLoadTimeout(10000); // Wait for full page load completion
    browser.manage().timeouts().setScriptTimeout(10000); // Wait for asynchronous scripts to finish
  },
  // ... other Protractor configs
};

Bonus: Improve Test Reliability with Explicit Waits #

Instead of just increasing timeouts, you can make your test more stable by waiting for the login button to be interactable before clicking it. Use Protractor's ExpectedConditions for this:

import { ExpectedConditions as EC } from 'protractor';
const { When } = require("cucumber");

When('I click the login button', { timeout: 10000 }, async function () {
  const loginButton = element(by.id('login-button'));
  // Wait for the button to be clickable before attempting to interact
  await browser.wait(EC.elementToBeClickable(loginButton), 10000);
  await loginButton.click();
});

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