Protractor无法点击Angular Material 2下拉列表项问题求助

Hey there! Let's dig into this dropdown click issue you're hitting with Protractor + Cucumber on your Angular 2 app. I’ve dealt with similar headaches before, so here’s a breakdown of common fixes and debugging steps to get you back on track:

1. Wait for the Dropdown Elements to Be Ready #

The #1 culprit here is usually that Protractor tries to click the dropdown option before it’s actually visible or interactive. Angular 2 apps often load dynamic content asynchronously, so you need to explicitly wait for the elements to be ready.

Use Protractor’s ExpectedConditions to wait for the option to be clickable (not just present):

const { ExpectedConditions } = require('protractor');

// In your Cucumber step definition (make sure to use async/await!)
When('I select the first dropdown option after clicking the text box', async function () {
  // 1. Locate and click the text input
  const textInput = element(by.id('your-text-input-id'));
  await textInput.click();

  // 2. Wait for the first dropdown option to be clickable (adjust selector to match your app)
  const firstDropdownOption = element(by.css('.dropdown-container .option-item:first-child'));
  await browser.wait(ExpectedConditions.elementToBeClickable(firstDropdownOption), 5000); // 5-second timeout

  // 3. Click the option
  await firstDropdownOption.click();
});

Pro tip: If your app uses Angular Material components (like mat-autocomplete), adjust the selector to target mat-option elements specifically:

const firstOption = element(by.css('mat-option:first-child'));

2. Verify Your Element Locators Are Correct #

Double-check that your selector is targeting the actual clickable option element, not just a parent container. Sometimes dropdowns have nested divs or spans, so you might need to tweak your CSS selector or XPath.

• Use browser.debugger() in your step to pause execution and inspect the DOM:

  await browser.debugger(); // Run protractor with --debug flag to use this
  

• In the debugger, run element(by.yourSelector).isDisplayed() to confirm the element is visible to Protractor.

3. Ensure Cucumber Steps Handle Asynchrony Properly #

Cucumber relies on promises or async/await to know when a step is complete. If you’re not using async/await (or returning promises), your step might finish before the dropdown even opens.

Always mark your step definitions as async and add await before every Protractor action:

// ❌ Bad: No async/await, step finishes immediately
When('I click the text box', function () {
  element(by.id('text-input')).click();
});

// ✅ Good: Async/await ensures actions complete before moving on
When('I click the text box', async function () {
  await element(by.id('text-input')).click();
});

4. Handle Scroll or Overlay Issues #

Sometimes dropdown options are hidden off-screen or behind an overlay. Use browser.executeScript to scroll the element into view before clicking:

await browser.executeScript("arguments[0].scrollIntoView();", firstDropdownOption.getWebElement());

If there’s a modal or overlay blocking the element, wait for that overlay to disappear first using ExpectedConditions.invisibilityOf():

const overlay = element(by.css('.loading-overlay'));
await browser.wait(ExpectedConditions.invisibilityOf(overlay), 3000);

5. Check for Angular Change Detection #

Occasionally, Protractor’s automatic wait for Angular stability might not catch custom dropdown components. Force a wait for Angular to settle with:

await browser.waitForAngular();

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