0

I am trying to automate some tasks at work and this requires getting page speed insights from pingdom for a lot of pages. I have no budget to purchase premium so I'm writing a python script myself.

I need to click 'North America - USA - San Francisco' and in order for that to appear in the HTML inspector, I must first click ::after. How do I click that with puppeteer? I understand clicks, but how do I reference the ::after tag?

Attempted Fix (I tried to edit the HTML but after my script clicks the button it reverts back to Asia):

    # All this did was switch the HTML and after it clicks the button,
    the_class = '[class=ng-tns-c3-0]'
    element = await page.querySelectorAll(the_class)
    title = await page.evaluate('(element) => element.innerText = "North America - USA - San Francisco"', element[3])
    await page.screenshot({'path': 'screenshotcorrect.png'})

Code Snippet:

import asyncio
from pyppeteer import launch
import sys

async def main():
    browser = await launch()
    page = await browser.newPage()
    await page.goto('https://tools.pingdom.com/')

    # Fill search field
    content = "https://www.howthefork.com/"
    await page.type('[id=urlInput]', content)

    # ISSUE IS HERE
    await page.waitForSelector("::after")
   # await page.click('::after')

    # All this did was switch the HTML it didn't select North America
    #the_class = '[class=ng-tns-c3-0]'
    #element = await page.querySelectorAll(the_class)
    #title = await page.evaluate('(element) => element.innerText = "North America - USA - San Francisco"', element[3])
    #await page.screenshot({'path': 'screenshotcorrect.png'})

    # Click 'start test'
    button = await page.xpath('/html/body/app-root/main/app-home-hero/header/section/app-test-runner/div/div[2]/div[3]/input')
    await button[0].click()

    # Wait for right elements to load
    await page.waitForXPath('/html/body/app-root/main/app-report/section[1]/app-summary/div/div/app-summary-player/div/div[2]/div/div[1]/app-metric/div[2]')

    # Print the score we want
    value = '[class=value]'
    grade_finder = await page.querySelectorAll(value)
    grade = await page.evaluate('(grade_finder) => grade_finder.textContent', grade_finder[0])
    print(grade)

    # Screenshot and close
    await page.screenshot({'path': 'screenshot.png'})
    await browser.close()

if __name__ == "__main__":
    asyncio.run(main())
Weeoowee
  • 25
  • 5
  • You can't target a pseudo element like `:after` or `:before` with events or queries as they don't exist in the DOM only in css – charlietfl Apr 07 '21 at 23:45
  • Try using a MutationObserver https://stackoverflow.com/questions/47903954/how-to-inject-mutationobserver-to-puppeteer – charlietfl Apr 07 '21 at 23:49

0 Answers0