1

I'm learning selenium. I am trying to retrieve hidden element but I am unable to see the element even after clicking on it. I have tried various answers already to access hidden text after clicking a button to expose hidden text elements. I'm trying to pick up the additional paragraphs that appear after 'Read More' is clicked on the site.

Using the following sample, I got as far as being able to click, but still no text appearing:

How to click on a hidden button with selenium through Python

I have manually checked the source code to see before and after elements:

Before 'Read More' click:

<div name="fish-deets__desc" class="fish-deets__desc">
  <h2 class="fish-deets__desc-header">trip desc</h2>
    <div class="encased__wrapper" style="max-height:150px;overflow:hidden">
      <div class="encased-content">
        <div>
          <div>
            <h4 class="fish-deets__desc-head">Top 10 Fishing Trips</h4>
            <p>Fishing trip paragraph 1</p>
            <p>Fishing trip paragraph 2</p>
          </div>
        </div>
      <div class="encased__gradient">
    </div>
  </div>
</div>
<div class="fish-deets__desc-container">
  <button class="button is-outline fish-deets__desc-button" type="button">Read More</button>
</div>

Here you can see that the additional paragraphs 3,4,5,6 are missing. Only paragraph 1 and 2 exist.

After 'Read More' click:

<div name="fish-deets__desc" class="fish-deets__desc">
  <h2 class="fish-deets__desc-header">trip desc</h2>
   <div class="encased__wrapper" style="overflow: visible;">
     <div class="encased-content is-expanded">
       <div>
         <div>
           <h4 class="fish-deets__desc-head">Top 10 Fishing Trips</h4>
           <p>Fishing trip paragraph 1</p>
           <p>Fishing trip paragraph 2</p>
           <p>Fishing trip paragraph 3</p>
           <p>Fishing trip paragraph 4</p>
           <p>Fishing trip paragraph 5</p>
           <p>Fishing trip paragraph 6</p>
           <div class="fish-deets__desc-key-features">
             <div class="fish-deets__key-features">
              <div class="fish-deets__key-features--item fish-deets__key-features--trip-type">
                <div class="fish-deets__key-features--key">trip type</div>
                <div class="fish-deets__key-features--value">TopSpots</div>
              </div>
             <div class="fish-deets__key-features--item fish-deets__key-features--land-area">
               <div class="fish-deets__key-features--key">Tools</div>
               <div class="fish-deets__key-features--value">
                 <span>Fish food</span>
               </div>
              </div>
            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div class="fish-deets__desc-container">
     <button class="button is-outline fish-deets__desc-button" type="button">Read Less</button>
  </div>
</div>

You can see that after manually clicking 'Read More', there are additional paragraphs, that the button changes to "Read Less" I am not sure if I'm recreating this correctly with the code.

Here is my code:

I've tried this to click:

driver.find_element_by_class_name('list-deet__desc-b').click()

I used the following to get an idea if the click worked and the elements were visible, but the problem is the class name I looked at were identical to other class names, so I got multiple confusing results.

elements2 = driver.find_elements_by_xpath("//div[@class='encased__wrapper']")

for element2 in elements2:
    print(element2.get_attribute("class"))
    print(element2.get_attribute("style"))
    print(element2.is_displayed())
    print("")

Results:

encased__wrapper max-height: 0px; overflow: hidden; False

encased__wrapper max-height: 0px; overflow: hidden; False

encased__wrapper max-height: 0px; overflow: hidden; False

encased__wrapper max-height: 0px; overflow: hidden; False

encased__wrapper max-height: 0px; overflow: hidden; False

encased__wrapper max-height: 0px; overflow: hidden; False

encased__wrapper max-height: 150px; overflow: hidden; True

encased__wrapper max-height: 0px; overflow: hidden; False

encased__wrapper overflow: visible; True

encased__wrapper overflow: visible; True

encased__wrapper max-height: 0px; overflow: hidden; True

The results are confusing because there are many classes with the same name and I am probably not navigating correctly. And I seem to get the same result before and after click, so I guess I'm clicking the wrong thing too.

Then to extract the text from the unhidden I've tried:

aab_elem  = driver.find_elements_by_class_name("encased_content")
for po in aab_elem:
    print(po.text)

The result does not produce hidden text. This only prints the first paragraph that is visible before clicking on the Read More button.

Hidden text is visible only when retrieving entire source via:

ps = driver.page_source
print(ps)

I'd like to retrieve only the relevant text.

5
  • Do you see the div expanded when you click with driver.find_element_by_class_name('list-deet__desc-b').click()? If not try using either xpath //button[@class='button is-outline list-deet__desc-b'] or css .button.is-outline.list-deet__desc-b to click the button. Commented Jul 5, 2019 at 19:54
  • Thanks, I tried the Xpath option just now and still only giving me non hidden paragraph. Can you please let me know what you mean by div expanded- do you mean run until the click and then check in the source to see if div is expanded? I'm new to this, so not sure. Commented Jul 5, 2019 at 20:06
  • <div class="encased-content is-expanded"> do you see the class name of this div as encased-content is-expanded or only encased-content. I believe if the click is successful then the class name will change to encased-content is-expanded from encased-content. And also make sure to change your code to get value using this aab_elem = driver.find_elements_by_xpath("//div[@class='encased-content is-expanded']") Commented Jul 5, 2019 at 20:09
  • And also not sure why you are using find_elements rather simply use find_element and get text directly. As text will get all the text will get the text from all children. So you don't have to use for each. Simply do this print(driver.find_element_by_xpath("//div[@class='encased-content is-expanded']").text()) unless you have multiple elements with the same class name. Commented Jul 5, 2019 at 20:14
  • Thanks @supputuri I've made updates to my description based on your feedback. I used the multiple elements because there were multiple paragraphs, but they're not showing anyway. Does the description give a better view of what I'm doing wrong? Commented Jul 6, 2019 at 12:52

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.