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.

Answer 1

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(); 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);
  }
})();

Answer 2

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!