如何在Protractor中使用browser.wait命令替换browser.sleep？

Great call swapping out browser.sleep() for explicit waits—this will make your tests way more reliable and efficient, no more waiting around longer than necessary! Let's walk through how to integrate this with your JSON-stored element locators step by step:

browser.wait() lets you wait for a specific condition to be met (like an element being clickable or visible) instead of a fixed time. This means your test moves on as soon as the element is ready, cutting down on unnecessary delays and reducing flakiness.

Step 1: Make Sure Your JSON Locator Structure is Clear #

First, ensure your JSON file (let's call it elementLocators.json) includes both the locator type (id, css, xpath, etc.) and the target value. This makes it easy to convert into a usable locator in your script:

{
  "loginPage": {
    "usernameInput": {
      "type": "id",
      "value": "username"
    },
    "passwordInput": {
      "type": "css",
      "value": "input[name='password']"
    },
    "submitButton": {
      "type": "xpath",
      "value": "//button[contains(text(), 'Sign In')]"
    }
  },
  "dashboardPage": {
    "welcomeMessage": {
      "type": "css",
      "value": ".welcome-text"
    }
  }
}

Step 2: Create a Reusable Wait Utility Function #

Instead of writing browser.wait() logic every time, wrap it into a helper function. This keeps your test code clean and consistent:

const { ExpectedConditions } = require('protractor');
const elementLocators = require('./elementLocators.json');

// Wait for an element to be clickable (adjust condition based on your needs)
async function waitForElement(locatorObj) {
  // Convert the JSON locator into a Protractor element locator
  let elementLocator;
  switch(locatorObj.type) {
    case 'id':
      elementLocator = element(by.id(locatorObj.value));
      break;
    case 'css':
      elementLocator = element(by.css(locatorObj.value));
      break;
    case 'xpath':
      elementLocator = element(by.xpath(locatorObj.value));
      break;
    // Add more cases for other locator types (className, name, etc.) as needed
    default:
      throw new Error(`Unsupported locator type: ${locatorObj.type}`);
  }

  // Wait with a timeout (adjust the 10000ms to your preferred max wait time)
  await browser.wait(
    ExpectedConditions.elementToBeClickable(elementLocator),
    10000,
    `Timed out waiting for element: ${locatorObj.value}`
  );
  
  return elementLocator;
}

Step 3: Replace browser.sleep() with Your Wait Function #

Now you can refactor your test code to use this helper instead of fixed sleeps. Here's a before-and-after example:

Old (Flaky) Code with browser.sleep() #

// Old approach: fixed waits after every action
await element(by.id('username')).sendKeys('test_user');
await browser.sleep(2000);
await element(by.css('input[name="password"]')).sendKeys('test_pass');
await browser.sleep(2000);
await element(by.xpath('//button[contains(text(), "Sign In")]')).click();

New (Reliable) Code with browser.wait() #

// New approach: wait for elements to be ready before acting
const usernameInput = await waitForElement(elementLocators.loginPage.usernameInput);
await usernameInput.sendKeys('test_user');

const passwordInput = await waitForElement(elementLocators.loginPage.passwordInput);
await passwordInput.sendKeys('test_pass');

const submitButton = await waitForElement(elementLocators.loginPage.submitButton);
await submitButton.click();

// If you need to wait for an element to be visible (not just clickable), adjust the condition:
// await browser.wait(ExpectedConditions.visibilityOf(elementLocator), 10000);

Bonus Optimization Tips #

• Customize Wait Conditions: Use other ExpectedConditions like visibilityOf, presenceOf, or textToBePresentInElement depending on what you need to wait for.
• Centralize Timeouts: Define a constant like const MAX_WAIT_TIME = 10000; so you can update timeout values in one place.
• Type Safety (If Using TypeScript): Add an interface for your JSON locator objects to catch errors early:

  interface ElementLocator {
    type: 'id' | 'css' | 'xpath';
    value: string;
  }
  

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