CODEWITHSUNDEEP
javascriptseleniumselenium-webdriverhidden
tutug
tutug

Reputation: 475

How to get the text content of hidden element with changing values

Here the element I want to test for

        <div id="console-modal" class="tab-item hide-item green-outline">
          <p id="message-box"></p>
          <button id="console-modal-button" class="white-button btn-md">close</button>
        </div>

when some action occur, I am adding a message to the <p> and setting the display of the <div> to block. In my test with selenium I expect to get the message that is present present in the updated <p> element. But it is returning an empty string.

This is the code that perform the action to update the <p> element

  it('should fill the login form and submit', () => {
    driver.findElement(By.id('username')).sendKeys('johnd');
    driver.findElement(By.id('passwd')).sendKeys('12345');
    return driver.findElement(By.id('inline-signin-button')).click();
  });

This is the test I am executing to test the content of the #message-box. In place of innerHTML I have also tried textContent. Also, when I add some text to the <p> element, the test is able to get the content, but it is not getting the updated content after the action completes and the box is displayed.

it('should find the auth error modal and close', () => {
   driver.wait(until.elementLocated(By.id('console-modal')));
   driver.findElement(By.id('message-box')).isDisplayed();
   return expect(driver.findElement(By.id('message-box')).getAttribute('innerHTML')).to.eventually.equal('authentication fail! check your username and password')
driver.findElement(By.id('console-modal-button')).click();
 });

I expect that the returned valued to be the updated content of the <p> element, but it appears it is keeping the content as of when the element is still hidden. Is there a way I could get the updated text content when it element is displayed. Or is there a way I could delay the execution until the element is displayed before testing it.

Upvotes: 0

Views: 217

Answers (1)

supputuri
supputuri

Reputation: 14135

You can use the below wait until.

var pElement = driver.wait(until.elementLocated(By.xpath("//div[@id='console-modal'][not(contains(@class,'hide-'))]/p[@id='message-box']")));

we are waiting until the div class name does not have hide, to make sure the block is displayed (which will make sure the p text update)

Upvotes: 1

Related Questions