Install Puppeteer<\/h2>\n
On Puppeteer’s Github page<\/a> it’s defined as:<\/p>\n a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.<\/p>\n<\/blockquote>\n Here are a few examples of what you can do with Puppeteer (although they say that you can automate almost everything that you do manually in the browser): <\/p>\n To install it, make sure you have Node.js<\/a> installed, and then run Here’s a simple example to get you started; create a This script will navigate to https:\/\/google.com<\/a> and save a screenshot in an image named Execute the script in the command line with: Mind you, the text you’re seeing is Croatian<\/a>, as that’s my locale setting.<\/p>\n Looks a bit ‘small’, doesn’t it? That’s because Puppeteer sets an initial page size to Here’s the code example that’s using Run it again with For more options (as I won’t go into explaining every API call of the final code) make sure to check their documentation<\/a>.<\/p>\n Below is the quick and dirty code that JustWorks\u2122 in logging into your App Store Connect account (please make sure to edit the script with your credentials), navigating to the Analytics screen and taking a screenshot.<\/p>\n I say quick and dirty because there are a myriad of improvements that could be done on this code:<\/p>\n The code is also available on Github<\/a>, and if you’ve got the skills and the desire, please make those changes and create a PR<\/a>.<\/p>\n When you run this code, in the terminal you should see this output:<\/p>\n The OTP code to log in to Apple, in my case, was sent to me via an SMS.<\/p>\n The screenshot (blurred for obvious reasons), looks like this in my case:<\/p>\n In my particular case, the login was rather simple (except for the fact that I had to select the frame and search within it for the element IDs).<\/p>\n But, what if your login requires you to enter the CAPTCHA? You know, those "are you human" popups that you get when logging into some website. Then I had a ‘great idea’ – what if you make a service where people actually read and type these CAPTCHAs for you?<\/p>\n \u26a0\ufe0f Now, let me be very clear – just because something is possible to do automatically, it doesn’t give you the right to use that in a bad way (spammers be gone!). Do with this information what you wish, but don’t come crying back saying "he made me do it".<\/p>\n<\/blockquote>\n Yes, no drumrolls needed, as almost everything today – this also already exists. CAPTCHA solving software exists and it’s a thing, and I found a blog posts that reviews 10 CAPTCHA-solving software<\/a>.<\/p>\n One that caught my eye was 2captcha.com<\/a>, and I found a blog post<\/a> that did a thorough teardown of the service. The reason that one caught my eye was that it seems that they offer their solution through libraries for most of the popular programming languages (Python, PHP, JS,Go, C#, Ruby).<\/p>\n Sorry for the sidetrack (and you can safely skip this section \ud83d\ude05), but I just remembered how, years ago, I attended a conference where Photomath’s (the app that solves math problems and shows you the steps of how to solve them) CEO was talking about how they’re solving the OCR problem (they supposedly had a breakthrough when they applied ML). They built an awesome business, that’s actually useful, and I saw that they recently integrated into Snapchat via their Snapchat Solver \ud83e\udd2f . I digress, yes, but with that good ‘tech’, I see them integrated into everything and that makes me proud (since, at the time, they were a Croatian-based startup).<\/p>\n<\/blockquote>\n Hope this straight-to-the-point post (with one slight detour \ud83d\ude05) showed you how you can make use of the amazing Puppeteer for your (legit) purposes.<\/p>\n Stay safe and code on \ud83d\udcaa<\/p>\n","protected":false},"excerpt":{"rendered":" TL;DR I was trying to automate my manual process of logging into ASC (App Store Connect) and taking a screenshot of the crashes, and preparing a report that…<\/p>\n","protected":false},"author":1,"featured_media":4605,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[],"class_list":["post-4604","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/4604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=4604"}],"version-history":[{"count":5,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/4604\/revisions"}],"predecessor-version":[{"id":4612,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/4604\/revisions\/4612"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/4605"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=4604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=4604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=4604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
npm install puppeteer<\/code> in your terminal.<\/p>\nA simple example using Puppeteer<\/h2>\n
google.js<\/code> file and paste this code in it:<\/p>\nconst puppeteer = require('puppeteer');\n\n(async () => {\n const browser = await puppeteer.launch();\n const page = await browser.newPage();\n await page.goto('https:\/\/google.com');\n await page.screenshot({ path: 'google-screenshot.png' });\n\n await browser.close();\n})();<\/code><\/pre>\ngoogle-screenshot.png<\/code>.<\/p>\nnode google.js<\/code> and you should get a PNG image of how the https:\/\/google.com<\/a> page would look like in your browser:<\/p>\n![\"\"](\"https:\/\/i.imgur.com\/jCUs4rU.png\")
<\/p>\n800 \u00d7 600 px<\/code>, which defines the screenshot size. The page size can be customized with Page.setViewport()<\/a>.<\/p>\n1920 x 1080 px<\/code> viewport size:<\/p>\nconst puppeteer = require('puppeteer');\n\n(async () => {\n const browser = await puppeteer.launch();\n const page = await browser.newPage();\n\n await page.setViewport({\n width: 1920,\n height: 1080,\n deviceScaleFactor: 1,\n });\n\n await page.goto('https:\/\/google.com');\n await page.screenshot({ path: 'google-screenshot.png' });\n\n await browser.close();\n})();<\/code><\/pre>\nnode google.js<\/code>, and the screenshot should now look like this: <\/p>\n![\"\"](\"https:\/\/i.imgur.com\/dZqIrhR.png\")
<\/p>\nThe Code\u2122<\/h2>\n
\n
const ACCOUNT = 'your.email@address.com';\nconst PASSWORD = 'YourVeryMuchSuperStrongPa$$word';\nconst LOGIN_FRAME = '#aid-auth-widget-iFrame';\nconst ASC_URL = 'https:\/\/appstoreconnect.apple.com\/';\nconst ANALYTICS_URL = 'https:\/\/appstoreconnect.apple.com\/analytics';\nconst APP_CRASHES_URL = 'theSpecificUrlToYourSpecificApp'; \/\/figure this out by copying the URL manually\n\nconst puppeteer = require('puppeteer');\nconst readline = require('readline');\n\nconst log = (msg) => {\n console.log(msg);\n}\n\nconst clickSignInButton = async (frame) => {\n log('Clicked the Sign In button');\n\n const element = await frame.waitForSelector(\n '#stepEl > sign-in > #signin > .container > #sign-in:not(disabled)'\n );\n\n await element.click();\n};\n\nconst clickTrustBrowser = async (frame) => {\n log('Clicked the Trust Browser button');\n\n const selector = 'button.trust-browser';\n const element = await frame.waitForSelector(selector);\n await element.click();\n};\n\nconst askForVerificationCode = () => {\n log('Asking for verification code');\n\n const readlineInterface = readline.createInterface({\n input: process.stdin,\n output: process.stdout,\n });\n\n return new Promise(resolve => {\n readlineInterface.question(\n 'Please enter your code: ',\n answer => {\n console.log(`Thanks, you entered: ${answer}`);\n readlineInterface.close();\n resolve(answer);\n }\n );\n });\n};\n\nconst login = async (page, user, password) => {\n log('Login page');\n const frameElement = await page.$(LOGIN_FRAME);\n if (!frameElement) {\n throw new Error(`Missing frame ${LOGIN_FRAME}`);\n }\n\n const frame = await frameElement.contentFrame();\n if (!frame) {\n throw new Error(`Missing frame ${LOGIN_FRAME}`);\n }\n\n const ACCOUNTInputSelector = '#account_name_text_field';\n await frame.waitForSelector(ACCOUNTInputSelector);\n\n await frame.focus(ACCOUNTInputSelector);\n await page.keyboard.type(user);\n\n await clickSignInButton(frame);\n\n const passwordInputSelector = '#password_text_field';\n await frame.waitForSelector(passwordInputSelector);\n await frame.waitForTimeout(2000);\n\n await frame.focus(passwordInputSelector);\n await page.keyboard.type(password);\n await clickSignInButton(frame);\n\n const verifyDeviceSelector = 'verify-phone';\n await frame.waitForSelector(`${verifyDeviceSelector}`);\n const isVerifyDevice = await frame.$(verifyDeviceSelector);\n\n if (isVerifyDevice) {\n log('Verify phone step');\n const verificationCode = await askForVerificationCode();\n await page.keyboard.type(verificationCode);\n await clickTrustBrowser(frame);\n }\n};\n\nconst main = async () => {\n const browser = await puppeteer.launch({\n \/\/ set this to false if you want to open a browser instance and see what your\n \/\/ script is doing, where it's clicking, what it's filling out, etc.\n headless: false \n });\n\n const page = await browser.newPage();\n await page.setViewport({\n \/\/ settings for my personal need, set this as you wish\n width: 1440,\n height: 815,\n deviceScaleFactor: 1,\n });\n\n log(`Oppening ${ASC_URL}`);\n await page.goto(ASC_URL);\n\n await page.waitForSelector(`${LOGIN_FRAME}`);\n await login(page, ACCOUNT, PASSWORD);\n\n await page.waitForNavigation({ waitUntil: 'networkidle2' });\n await page.waitForSelector('.main-nav-label');\n\n await page.goto(`${ANALYTICS_URL}`);\n await page.goto(`${APP_CRASHES_URL}`);\n\n await page.waitForNavigation({ waitUntil: 'networkidle2' });\n await page.waitForSelector('#appanalytics');\n \/\/ sometimes the selector will load, but not the whole content, so you may\n \/\/ want to play with the waitForTimeout. The argument is in mili seconds\n \/\/await page.waitForTimeout(5000); \n\n await page.screenshot({ path: 'app_analytics_crashes.png' });\n\n log('Closing the browser page');\n await browser.close();\n};\n\nmain().catch(error => console.error(error));<\/code><\/pre>\n\u279c node apple.js \nOppening https:\/\/appstoreconnect.apple.com\/\nLogin page\nClicked the Sign In button\nClicked the Sign In button\nVerify phone step\nAsking for verification code\nPlease enter your code: 866216\nThanks, you entered: 866216\nClicked the Trust Browser button\nClosing the browser page<\/code><\/pre>\n![\"\"](\"https:\/\/i.imgur.com\/8aO58hI.png\")
<\/p>\nThat’s great, but what if my login requires CAPTCHA?<\/h2>\n
\n
A trip down the memory lane<\/h3>\n
\n
Conclusion<\/h2>\n