Protractor+TypeScript非Angular应用弹窗关闭失效问题求助

Hey there! Let's figure out why your popup's OK button isn't getting clicked properly in your non-Angular app using Protractor and TypeScript. Looking at your code, there are a few key issues with promise handling and element waiting that are likely causing the problem. Let's fix this step by step.

Key Issues in Your Original Code #

• Nested Promise Hell: The way promises are nested makes it hard to guarantee execution order—your code might be trying to click the button before the popup is fully loaded, or switching back to the main window too early.
• No Explicit Waits: For non-Angular apps, Protractor's default Angular-specific waits don't apply. You need to explicitly wait for elements to be visible/interactable before acting on them.
• Redundant Handle Calls: Calling getAllWindowHandles() multiple times can lead to inconsistent handle arrays if the popup state changes between calls.
• Missing Error Handling: There's no check to ensure the popup handle (handles[1]) actually exists before switching to it.

Fixed Code with Async/Await #

Since you're using TypeScript, async/await will make your code much cleaner and easier to reason about. Here's the revised version:

Then(/^user validate login error message and ok to close the popup message and return to main page$/, async () => {
  // Disable Angular sync for non-Angular apps
  await browser.waitForAngularEnabled(false);

  // Get initial window handles
  const handles = await browser.getAllWindowHandles();
  // Ensure popup has opened (there should be 2 handles)
  expect(handles.length).to.equal(2, "Popup window did not open");

  // Switch to the popup window
  await browser.switchTo().window(handles[1]);

  // Wait for the error message to be visible and validate its text
  const errorMessage = element(by.xpath('//*[contains(text(), "Error Signing In")]')); // Replace with your actual XPath
  await browser.wait(ExpectedConditions.visibilityOf(errorMessage), 40000, "Error message not visible");
  const messageText = await errorMessage.getText();
  expect(messageText).to.equal('Error Signing In');

  // Wait for the OK button to be clickable, then click it
  const okButton = element(by.xpath('//*[contains(text(), "OK")]')); // Replace with your actual XPath
  await browser.wait(ExpectedConditions.elementToBeClickable(okButton), 40000, "OK button not clickable");
  await okButton.click();

  // Wait for the popup to close (handle count should go back to 1)
  await browser.wait(async () => {
    const updatedHandles = await browser.getAllWindowHandles();
    return updatedHandles.length === 1;
  }, 40000, "Popup did not close after clicking OK");

  // Switch back to the main window
  const mainHandles = await browser.getAllWindowHandles();
  await browser.switchTo().window(mainHandles[0]);

  // Validate main page title
  const pageTitle = await browser.getTitle();
  expect(pageTitle).to.equal('login page');
});

Important Notes #

1. Non-Angular Setup: Always call browser.waitForAngularEnabled(false) when testing non-Angular apps—this turns off Protractor's automatic Angular synchronization which would otherwise cause timeouts.
2. Explicit Waits: Use ExpectedConditions (from the protractor package) to wait for elements to be visible or clickable. This ensures you don't interact with elements before they're ready.
3. Handle Validation: Check that the handle array has the expected length before switching windows—this prevents errors if the popup fails to open.
4. Wait for Popup Closure: After clicking OK, wait until the window handle count returns to 1 to confirm the popup has closed before switching back to the main window.

内容的提问来源于stack exchange，提问作者Npcc.P