skadabr/puppeteer-selector

advanced css selectors for puppeteer

Puppeteer-select

at this point its just proof of concept made for solving my own issue. Feel free to add any suggestions

Why

I got used to some useful css selectors which are not supported by puppeteer like:

:contains(text)

example from puppeteer docks modified to be using puppeteer-selector

const puppeteer = require('puppeteer');
const select = require ('puppeteer-select');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  await select(page).assertElementPresent('div.Tag:contains(Events) > button');
  const element = await select(page).getElement('div.Tag:contains(Events) > button');
  await element.click()

  await browser.close();
})();

this lib is using "sizzle" all available selectors is here https://github.com/jquery/sizzle/wiki#selectors

puppeteer-selector's Issues

extra comma

There is an extra comma which blocks debugging on Visual Studio Code

puppeteer-selector/index.js

Line 12 in 91758d8

selector,

puppeteer-selector/index.js

Line 12 in 91758d8

selector,

Cant find text inside a div

Hey! First of all thank you for this, i'm trying to use it in one of my projects and so far is working great.
But today i tried to find a div by the text inside of it (i can't use the id, the class or the name of the div), but it doesn't work.
What i tried is
await select(page).assertElementPresent('div:contains(Text) > "hello"');
const element = await select(page).getElement('div:contains(Text) > "hello"');
await element.click()

if you can help me with this it will be awesome.
Thank you

To return multiple elements: getElements()

@Skadabr good stuff this is. 👏

Can't you make this to return multiple elements rather than the first element? :contains() may result in multiple elements rather than a single element.

Sizzle is not defined

Unhandled promise rejection (rejection id: 1): Error: Evaluation failed: ReferenceError: Sizzle is not defined

Package.json:
"puppeteer": "^1.19.0", "puppeteer-select": "^1.0.3",
Platform/OS: Windows 10
Node Js version 8.9.1

const puppeteer = require('puppeteer');
const select = require ('puppeteer-select');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('somesite');
  
  await select(page).assertElementPresent('span:contains("someText")');
  const element = await select(page).getElement('span:contains("someText")');
  await element.click()

  await browser.close();
})();

Sometimes selector contains does not found element

Step To Reproduce

Tell us about your environment:

• Package.json:
  "puppeteer": "^1.17.0", "puppeteer-select": "^1.0.2"
• Platform/OS: Ubuntu 18.04
• Node Js version 8.14.0

What steps will reproduce the problem?

i have for loop, inside of it select element that contains text (pagination). Sometimes it cant find the element and throw error like this :
Error: an element with selector: "a.page_promo_lain:contains(undefined)" not found

my for loop code :
`for (let activePage of pages) {
console.log('page sekarang ' + activePage)
await page.waitFor(2000)

                let clickPage = await select(page).getElement(`a.page_promo_lain:contains(${activePage})`)
                await clickPage.click()
        
                // if promo exist
                if (await page.$('#imgClass') !== null) {
                    // get href promo
                    const hrefs = await page.evaluate(
                        () => Array.from(document.body.querySelectorAll('#promolain > li > a'), ({ href }) => href)
                    );

                    for (let href of hrefs) {
                        const detail = await getDetails(browser, href)
                        result[`${cat}`].push(detail);
                    }
                } else {
                    console.log('Promo not found!');
                }
            }`

What is the expected result?

should be able to click element

What happens instead?

cant find element