question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Need to check 'aria-expanded' attribute of Xpath element

See original GitHub issue
  • Node version: v8.12.0
  • Puppeteer version: 2.0.0
  • Platform / OS version: Windows 10 Home, Version 10.0.18362 Build 18362 (I also test on a macbook sometimes)

I am trying to check to see if a box in the backend of a WordPress website is expanded or collapsed, however, I am having a lot of trouble.

Here is what the HTML looks like.

<div id="wpseo_meta" class="postbox closed yoast wpseo-metabox"> <button type="button" class="handlediv" aria-expanded="false"> <span class="screen-reader-text">Toggle panel: Yoast SEO</span> <span class="toggle-indicator" aria-hidden="true"></span> </button>

I want to scrape that button and know what the value of the “aria-expanded” attribute is. (If its false, I will click the button to expand, if its true, I’ll do nothing). I have to target this with Xpath because there are multiple buttons with the class ‘handlediv’ on the page.

What I am looking for is something that will look at that aria-expanded value on each page, then spit out either true or false. var isBoxExpanded == false.

Here is what I have tried so far:

var element = await page.$x('//div[contains(@class, "wpseo-metabox")]/button[contains(@class, "handlediv")]'); var isYoastExpanded = await element.getAttribute("aria-expanded").jsonValue();

The value of the first line is ‘JSHandle@node’ (which is no help to me), but the 2nd line fails and gives me the following error message:

(node:16872) UnhandledPromiseRejectionWarning: TypeError: element.getAttribute is not a function at line 2 at < anonymous > at process._tickCallback (internal/process/next_tick.js:189:7) (node:16872) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:16872) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

What can I do to get the value of that aria-expanded attribute?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
kblokcommented, Nov 13, 2019
var element = await page.$x('//div[contains(@class, "wpseo-metabox")]/button[contains(@class, "handlediv")]');
var isYoastExpanded = await element[0].evaluate(el => el.getAttribute('aria-expanded'));
1reaction
warnakeycommented, Nov 13, 2019

That worked!

Thank you @kblok for being the true MVP. 🥇

Read more comments on GitHub >

github_iconTop Results From Across the Web

Need to check 'aria-expanded' attribute of Xpath element #5155
I want to scrape that button and know what the value of the "aria-expanded" attribute is. (If its false, I will click the...
Read more >
python - How to retrieve the value of the attribute aria-label ...
How can I retrieve the aria-label value (Unlike) from the element? I tried to do: btn = drive.find_element(By.xpath, "xpath") btn.get_attribute( ...
Read more >
Using aria-expanded to indicate the state of a collapsible ...
Using aria-expanded to indicate the state of a collapsible element. This is an outdated draft. ... The aria-expanded attribute is used for this...
Read more >
Element.ariaExpanded - Web APIs - MDN Web Docs
The ariaExpanded property of the Element interface reflects the value of the aria-expanded attribute, which indicates whether a grouping ...
Read more >
XPath for In-Browser Testing - Adrian Roselli
This works for other elements and attributes. ... living somewhere within a node with aria-hidden="true" (primarily to see if Angular is the ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found