不同页面同ID元素sendKeys失败：元素不可见问题求助

First off, let's break down why you're hitting this issue: even though both inputs share the same id="emergency-contact", the DOM treats them as separate elements—and the one you're trying to interact with on the second page is either not being properly targeted, or isn't visible to the browser when you attempt sendKeys.

Looking at the two element snippets you shared, key differences hint at the root problem:

• The first input has the valid class and aria-invalid="false" (signaling it's already been activated/validated and is visible)
• The second input lacks those state classes, has an empty value, and ties to a unique data-sync-to-element ID, suggesting it might be in a different DOM state or context

Here are actionable fixes to resolve this:

1. Target the Exact Element with Precise Selectors #

Using By.id might be grabbing the first matching element (the visible one from the first page) even when you're on the second page. Narrow down your selector to match the specific input on the second page:

CSS Selector using data-sync-to-element #

Leverage the unique sync ID tied to the second input:

driver.findElement(By.cssSelector("input#emergency-contact[data-sync-to-element='#contact-info-view-emergency_contact_name-243202809']")).sendKeys("Sarvesh Singh");

CSS Selector excluding the valid class #

Since the second input doesn't have the valid class, filter it out:

driver.findElement(By.cssSelector("input#emergency-contact:not(.valid)")).sendKeys("Sarvesh Singh");

XPath for Exact Matching #

If CSS isn't your preference, use XPath to target the input with its unique attributes:

// Match by the specific data-sync value
driver.findElement(By.xpath("//input[@id='emergency-contact' and @data-sync-to-element='#contact-info-view-emergency_contact_name-243202809']")).sendKeys("Sarvesh Singh");

// Or match by missing the 'valid' class
driver.findElement(By.xpath("//input[@id='emergency-contact' and not(contains(@class, 'valid'))]")).sendKeys("Sarvesh Singh");

2. Use Explicit Waits to Ensure Element Visibility #

Even if you target the right element, it might not be fully rendered or visible yet (especially if the second page loads dynamically). Add an explicit wait to wait for the element to become visible before interacting:

WebDriverWait wait = new WebDriverWait(driver, 10); // Wait up to 10 seconds
WebElement emergencyContact = wait.until(
    ExpectedConditions.visibilityOfElementLocated(
        By.cssSelector("input#emergency-contact[data-sync-to-element='#contact-info-view-emergency_contact_name-243202809']")
    )
);
emergencyContact.sendKeys("Sarvesh Singh");

3. Check for Common Visibility Blockers #

If the above doesn't work, investigate why the element isn't visible:

• Is the element in an iframe? If so, switch to the iframe first using driver.switchTo().frame("frame-id-or-name"); before locating the input.
• Is it hidden by CSS? Inspect the element's styles to check for display: none, visibility: hidden, or opacity: 0. You might need to trigger a user action (like clicking a tab or expanding a section) to make it visible first.
• Is it outside the viewport? Scroll to the element using JavaScript before interacting:

  WebElement targetElement = driver.findElement(By.cssSelector("input#emergency-contact[data-sync-to-element='#contact-info-view-emergency_contact_name-243202809']"));
  ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", targetElement);
  targetElement.sendKeys("Sarvesh Singh");
  

4. Verify Page Context #

Make sure you're actually on the second page when attempting the interaction. Sometimes page transitions don't fully complete, so add a wait for a unique element on the second page to confirm you're in the right context before targeting the emergency contact input.

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