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.
divexpanded when you click withdriver.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-bto click the button.<div class="encased-content is-expanded">do you see the class name of this div asencased-content is-expandedor onlyencased-content. I believe if the click is successful then the class name will change toencased-content is-expandedfromencased-content. And also make sure to change your code to get value using thisaab_elem = driver.find_elements_by_xpath("//div[@class='encased-content is-expanded']")find_elementsrather simply usefind_elementand get text directly. As text will get all thetextwill get the text from all children. So you don't have to use for each. Simply do thisprint(driver.find_element_by_xpath("//div[@class='encased-content is-expanded']").text())unless you have multiple elements with the same class name.