Wählen Sie das übergeordnete Element eines bekannten Elements in Selen aus

Ich habe ein bestimmtes Element, das ich mit Selen 1 auswählen kann .

Leider muss ich auf das übergeordnete Element klicken, um das gewünschte Verhalten zu erhalten. Das Element, das ich leicht finden kann, hat ein nicht auswählbares Attribut, so dass es für das Klicken tot ist. Wie navigiere ich mit XPath nach oben ?

Dort gibt es einige Möglichkeiten. Der Beispielcode ist in Java, aber ein Port zu anderen Sprachen sollte unkompliziert sein.

JavaScript:

WebElement myElement = driver.findElement(By.id("myDiv"));
WebElement parent = (WebElement) ((JavascriptExecutor) driver).executeScript(
                                   "return arguments[0].parentNode;", myElement);

XPath:

WebElement myElement = driver.findElement(By.id("myDiv"));
WebElement parent = myElement.findElement(By.xpath("./.."));

Beziehen des Treibers von der WebElement

Hinweis: Wie Sie sehen können, benötigen Sie für die JavaScript-Version die driver. Wenn Sie keinen direkten Zugriff darauf haben, können Sie es über Folgendes abrufen WebElement:

WebDriver driver = ((WrapsDriver) myElement).getWrappedDriver();

Wenig mehr darüber XPath axes

Nehmen wir an, wir haben folgende HTMLStruktur:

<div class="third_level_ancestor">
    <nav class="second_level_ancestor">
        <div class="parent">
            <span>Child</span>
        </div>
    </nav>
</div>

1. //span/parent::*- gibt jedes Element zurück, das direkt übergeordnet ist.

In diesem Fall ist die Ausgabe <div class="parent">

2. //span/parent::div[@class="parent"]- kehren übergeordnetes Element nur von den genauen Knotentyp und nur wenn angegebenes Prädikat ist wahr.

Ausgabe: <div class="parent">

3. //span/ancestor::*- gibt alle Vorfahren (einschließlich der Eltern) zurück.

Ausgang: <div class="parent">, <nav class="second_level_ancestor">, <div class="third_level_ancestor">...

4. //span/ancestor-or-self::*- gibt alle Vorfahren und das aktuelle Element selbst zurück.

Ausgang: <span>Child</span>, <div class="parent">, <nav class="second_level_ancestor">, <div class="third_level_ancestor">...

5. //span/ancestor::div[2]- gibt den zweiten Vorfahren (beginnend mit dem übergeordneten) vom Typ zurück div.

Ausgabe: <div class="third_level_ancestor">

Betrachten wir Ihr DOM als

<a>
    <!-- some other icons and texts -->
    <span>Close</span>
</a>

Nachdem Sie nun das übergeordnete Tag 'a' basierend auf dem <span>Text auswählen müssen , verwenden Sie

driver.findElement(By.xpath("//a[.//span[text()='Close']]"));

Erläuterung: Wählen Sie den Knoten basierend auf dem Wert seines untergeordneten Knotens aus

Schauen Sie sich die möglichen XPath-Achsen an , nach denen Sie wahrscheinlich suchen parent. Je nachdem, wie Sie das erste Element finden, können Sie einfach den xpath dafür anpassen.

Alternativ können Sie die Doppelpunktsyntax ausprobieren , mit ..der das übergeordnete Element des aktuellen Knotens ausgewählt wird.

Dies kann für eine andere Person nützlich sein: Verwenden dieses Beispiel-HTML

<div class="ParentDiv">
    <label for="label">labelName</label>
    <input type="button" value="elementToSelect">
</div>
<div class="DontSelect">
    <label for="animal">pig</label>
    <input type="button" value="elementToSelect">
</div>

Wenn ich beispielsweise ein Element im selben Abschnitt (z. B. div) als Beschriftung auswählen möchte, können Sie dies verwenden

//label[contains(., 'labelName')]/parent::*//input[@value='elementToSelect'] 

Dies bedeutet nur, für ein Etikett (es könnte so etwas wie a, h2) genannt labelName. Navigieren Sie zum übergeordneten Element dieser Bezeichnung (dh div class="ParentDiv"). Suchen Sie in den Nachkommen dieses Elternteils nach einem untergeordneten Element mit dem Wert von elementToSelect. Damit wird die zweite elementToSelectmit DontSelectdiv als übergeordnetem Element nicht ausgewählt .

Der Trick besteht darin, dass Sie die Suchbereiche für ein Element reduzieren können, indem Sie zuerst zum übergeordneten Element navigieren und dann den Nachkommen dieses übergeordneten Elements nach dem gewünschten Element suchen. following-sibling::h2In einigen Fällen kann auch eine andere Syntax verwendet werden. Dies bedeutet das folgende Geschwisterelement h2. Dies funktioniert für Elemente auf derselben Ebene mit demselben übergeordneten Element.

Sie können dies tun, indem Sie / parent :: node () im xpath verwenden. Hängen Sie einfach / parent :: node () an den xpath der untergeordneten Elemente an.

Beispiel: xpath des untergeordneten Elements sei childElementXpath .

Dann wäre xpath seines unmittelbaren Vorfahren childElementXpath / parent :: node () .

Xpath seines nächsten Vorfahren wäre childElementXpath / parent :: node () / parent :: node ()

und so weiter..

Sie können auch mit zu einem Vorfahren eines Elements navigieren 'childElementXpath/ancestor::*[@attr="attr_value"]'. Dies ist nützlich, wenn Sie ein bekanntes untergeordnetes Element haben, das eindeutig ist, aber ein übergeordnetes Element hat, das nicht eindeutig identifiziert werden kann.

Wir können das übergeordnete Tag mit Hilfe von Selen wie folgt auswählen:

driver.findElement(By.xpath("//table[@id='abc']//div/nobr[.='abc']/../.."));

Dies wird Ihnen helfen, den Großelternteil des bekannten Elements zu finden. Entfernen Sie einfach eines (/ ..), um das unmittelbare übergeordnete Element zu finden.

Mögen:

driver.findElement(By.xpath("//table[@id='abc']//div/nobr[.='abc']/..));

Es gibt einige andere Möglichkeiten, dies zu implementieren, aber es hat für mich gut funktioniert.