Selecting a Div inside a Nav

Question

I am attempting to automate some functions within Chrome using Puppeteer and Chromium. I'm able to log in, select the main navigation element and the sub-navigation menu appears. I'm currently playing in the console to find the correct selector to pass into Puppeteer, however, I'm having difficulty.

HTML below:

<div id="popupTaskMenu" class="launcher...">
  <div -not important to task></div>
  <nav class="task_launcher_item_heading">
    <div task-item="0" class="task_launcher_item_click">Text</div>
    <div task-item="1" class="task_launcher_item">Text</div>
  </nav>
<div>

With in the Chrome console I can get somewhat close to making the <nav> items accessible by using document.getElementsByClassName("task_launcher_item_heading")[0].childNodes[0].innerText, which will return the innerText of the element, but using the .click() method comes back undefined.

Any ideas will surely help.

Hi, can you show us your click functionality? Where exactly are you using the `.click()` function on — roberrrt-s, May 22 '19 at 19:48
You might want to use a [more complex selector](https://stackoverflow.com/a/55956674/5627599) and then use `document.querySelector` or `page.$` in puppeteer. — Thomas Dondorf, May 22 '19 at 19:55
the more complex selector is a great tool and I am able to send .click() to that element within the JS Console, however, I'm not sure how to use that within puppeteer. `await page.$('#popupTaskMenu > nav > div.nth-child(2)')` is correct I believe, but how do I send .click() to that? I'll read and play around some more. — Rsp8, May 24 '19 at 17:55
so I've tried a few different options, and no matter which, I get an error that states "ERR Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': '#popupTaskMenu > nav > div.nth-child(2)' is not a valid selector. Last line I tried was `await page.evaluate((selector) => document.querySelector('#popupTaskMenu > nav > div.nth-child(2)').click();` — Rsp8, May 24 '19 at 19:12

jmdatasci · Answer 1 · 2019-05-22T20:22:35.853

It looks like you are just trying to target this guy and make him do something.

 <div task-item="0" class="task_launcher_item_click">Text</div>

if that is the case, can you use const Nav = document.getElementById(); await Nav.click(); function instead and give it it's own ID while still retaining the task_launcher_item_click class?

Once you have the click on that specific element can you use a promise function https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#frameclickselector-options

const [response] = await Promise.all([
  page.waitForNavigation(waitOptions),
  frame.click(selector, clickOptions),
]);

or an attribute selector https://drafts.csswg.org/selectors-4/#attribute-selectors

const element = await page.$('[href="http://www.iana.org/domains/example"]');
    await element.click();
  } catch (err) {
    console.error(err);
  }
})();

score 0 · Accepted Answer · answered May 24 '19 at 19:30

Alright, someday I'm going to be a smart person... my problem was I was using #popupTaskMenu > nav > div.nth-child(2) when it should have been #popupTaskMenu > nav > div:nth-child(2)

I should have used a COLON rather than the period!!!! 2 hours of my life people!

Selecting a Div inside a Nav

2 Answers2