如何使用Selenium WebDriver结合Node.js获取div嵌套p标签的内容

Hey there! Let's walk through how to grab that nested

tag's content using Selenium WebDriver in Node.js. The HTML you provided has a hidden div (with display:none), so we'll cover both visible and hidden element scenarios to make sure you're covered.

First, Make Sure You're Set Up #

If you haven't already, install the Selenium WebDriver package:

npm install selenium-webdriver

You'll also need the appropriate browser driver (like ChromeDriver for Chrome) set up in your PATH or linked in your code.

Scenario 1: The Element is Visible #

If the div was visible, you can use standard locator strategies to target the

tag directly or via its parent div. Here are two straightforward approaches:

const { Builder, By } = require('selenium-webdriver');

async function getVisibleParagraphText() {
    let driver = await new Builder().forBrowser('chrome').build();
    try {
        await driver.get('your-target-page-url');

        // Option 1: Locate the parent div first, then find the child <p>
        const parentDiv = await driver.findElement(By.id('guideContainer-rootPanel-HouseholdContact-guidetextbox___guideFieldShortDescription'));
        const paragraph = await parentDiv.findElement(By.tagName('p'));
        const text = await paragraph.getText();
        console.log('Paragraph text:', text); // Output: Enter the first name of the contact person.

        // Option 2: Directly target the <p> with a combined CSS selector
        const directParagraphText = await driver.findElement(
            By.css('#guideContainer-rootPanel-HouseholdContact-guidetextbox___guideFieldShortDescription p')
        ).getText();
        console.log('Direct paragraph text:', directParagraphText);
    } finally {
        await driver.quit();
    }
}

getVisibleParagraphText();

Scenario 2: The Element is Hidden (Like Your Example) #

Since your div has display:none, Selenium's getText() will return an empty string because it only retrieves visible text. To get the content regardless of visibility, use executeScript to access the DOM directly:

const { Builder, By } = require('selenium-webdriver');

async function getHiddenParagraphText() {
    let driver = await new Builder().forBrowser('chrome').build();
    try {
        await driver.get('your-target-page-url');

        // Use JavaScript to fetch the text content from the hidden <p>
        const hiddenText = await driver.executeScript(`
            return document.querySelector('#guideContainer-rootPanel-HouseholdContact-guidetextbox___guideFieldShortDescription p').textContent;
        `);
        console.log('Hidden paragraph text:', hiddenText); // Will return the full text even if hidden
    } finally {
        await driver.quit();
    }
}

getHiddenParagraphText();

Pro Tip: Wait for the Element to Load #

Don't forget to add explicit waits to ensure the element exists in the DOM before trying to access it. This prevents race conditions where your code runs before the element is loaded:

const { Builder, By, until } = require('selenium-webdriver');

// Inside your try block:
await driver.wait(
    until.elementLocated(By.css('#guideContainer-rootPanel-HouseholdContact-guidetextbox___guideFieldShortDescription p')),
    10000 // Wait up to 10 seconds
);

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