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.

How to target and interact with Polymer tags using Puppeteer?

See original GitHub issue

Tell us about your environment:

  • Puppeteer version: Current latest
  • Platform / OS version: Windows 10
  • URLs (if applicable):
  • Node.js version: 11.6.0

(This link is possibly region blocked, I don’t know for sure) https://tinyurl.com/yd6qv9ok

I am attempting to interact with the pdf viewer for the above document, but the element that I am attempting to target is, and is nested inside of, a custom-built tag created using Polymer. How do I target, and click on, an element such as <viewer-pdf-toolbar>?

In the site’s own console window, these elements can be targeted like one would expect, by calling document.querySelector with a selector such as ‘viewer-pdf-toolbar’, and it can even access the insides of shadow roots using /deep/.

This functionality does not appear to be supported by Puppeteer, is it related to the version of Chromium it is running? Would reverting to a version of Puppeteer that uses a version of Chromium prior to 63, (where /deep/ was removed. See this for details) allow the use of /deep/?

I have tried:

  • Calling await page.$('viewer-pdf-toolbar'), resolves to null because it cannot find the element
  • Calling await page.$$('viewer-pdf-toolbar, resolves to an empty array for the same reason
  • Using page.waitForSelector('viewer-pdf-toolbar'), times out after 30 seconds, due to not finding the element
  • Targeting the element by querying the dom-module tag, which is the outermost container for every Polymer module
  • Attempting to find a method to access the document object directly, to then call document.querySelector, like in the console window

What is my use case for this?

My goal is to use Puppeteer to access the pdf viewer, and click on the download button to download the pdf document. If there are better, more elegant solutions to this problem, I am completely open to suggestions.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
kerrijonescommented, Jan 14, 2019

reply@reply.github.com

0reactions
Anders3510commented, Jan 15, 2019

@Anders3510 if your end goal is to download the PDF, why don’t you just fetch it from URL?

I don’t believe it’s a viable solution as the pdf comes from a site I have no jurisdiction over and is updated regularly, which means the urls change drastically.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to specify selector for Polymer elements shadow dom ...
His method works for app-header in https://shop.polymer-project.org/: const puppeteer = require('puppeteer'); const shadowSelectorFn = (el, ...
Read more >
Puppeteer - Creating and Interacting with a Page - YouTube
This video explains what a Page is in terms of Puppeteer, and how to create and interact with it - considering its frame....
Read more >
Playing around with Google Maps and Puppeteer to track ...
The first thing to do was to gather all carrefour locations in a database. Luckily, the main website itself has us covered. The...
Read more >
Getting into Puppeteer : Inject | Interact | Keys | Capture
At the end of this article we will learn how to. Inject custom Javascript functions into another page's context. Interact with forms to ......
Read more >
@storybook/addon-storyshots-puppeteer - Package Manager
6.5.14 (December 2, 2022). Bug Fixes. Angular: Fix "webpack_require.nmd is not a function issue" in Angular 15 #20043; CLI/React native: Fix addons template ......
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