Automate your workflows: Here we explore sending HTML to Google Docs through an automation in Packagesss.
Learning to create Packages, especially if you are not particularly tech savvy, can be a challenge. Here I walk you through grabbing the HTML off a page and sending it to Google Docs. I used this to essentially copy and paste content from a membership that drops a template weekly that is intended to be copied and pasted. Please do not use this to copy and paste content you are not entitled to.
HTML to Google Docs
Here we will be sending the HTML of a page to Google Docs.
What you need:
- The pages you need to navigate to get the HTML
- Packagesss
- Connection App (I use Pabbly Connect)
- Google Docs
The Process in Brief
Create a Browser key if you don’t have one.
Log into the website in the Packages Browser key.
Create a New Package
Create an Automation in Pabbly
Connect and Test
Create a Browser Key (Packagesss)
To run packages on websites that you have to log into, you will first need to log into that website.
- Go to the Keys section on the left sidebar.
- If you don’t have a browser key yet, click on the green + button the the top right
- Choose a key from the dropdown menu. In this case “Chrome” (even if you are accessing Packagesss from a different browser.
- Give this browser profile a meaningful name (optional). If you have multiple profiles for awesome sites, you may want to use your profile name.
- Click “Save key”
Log in on Your Browser Key (Packagesss)
- Click on the green eye icon on the top left of the Browser key
- Enter the URL into the URL bar at the top.
- Log into the site you are trying to access.
Create a new Package (Packagesss)
A package is what does all the work in Packagesss, it’s the workflow that does what you want the package to do.
- Go to “packages” on the left side menu.
- Click the green + button the the top right
- Give your Package a name and description and click on “Create”
Inside the Package
The package consists of several nodes that work together to create your package.
You always need an Input node and a Finished node. Other nodes do the actual work. In this package, you will also need a Browser node and to call another Package node, “Pabbly Connect Webhook”.
The Input node
Create an input node with the page where you need to start the action on.
- Name: A name that makes sense to you and that you can easily recognize when you reference it.
- Input type: text
- Default value: Main page where you want to start.
Browser Node
The Browser node is where you create the automation. This is where all the action happens.
- Name: A name that makes sense to you and that you can easily recognize when you reference it.
- Taggable steps: the Input node
- JSON Keys: the Ids of the steps you will add in the Automation Steps
The Automation Steps
- Go to URL: Go to the main website:
- Wait for x milliseconds: add a delay (optional?)
- Click something: This is the tricky part. You have to choose a correct selector. Many different selectors may work and there are different ways to create a selector. See the selector section below.
- Wait for x milliseconds: add a delay (optional?)
Same as above, but this time I gave it a 10 second (10,000 milliseconds) of delay.
- Extract Data: Get the H1 heading in this case (so that you can name things with this data). There should only be one H1 heading so this selector is easy. Copy and paste the “Browser Step Id” to the “JSON Keys” dialog.
- Extract the HTML data. This time the selector is once again, easy. Copy and paste the “Browser Step Id” to the “JSON Keys” dialog.
- Take a screenshot. Copy and paste the “Browser Step Id” to the “JSON Keys” dialog.
The Next Node
I have two ways of getting this information to Pabbly: a Package node and an Email node shown here.
The Package Node
The package node connects this package to a prebuilt Pabbly Package.
The package node takes a Pabbly webhook as an input. Pabbly takes over from there.
The Email Node
The Email node sends the data as an email to Pabbly and to my email (or any other email you choose). Then, Pabbly takes over from there.
Selectors and Locators in Automation
CSS selectors and are used when creating code for pages and for locating that code when using automation. When using them in automation, they give the direction of how to get somewhere in the code. Locators (as they are called in Packagesss) seem to be the same thing as (or very similar to) to CSS Selectors.
It‘s kind of like trying to find your way in a large building (the website). You can get directions for the whole building (HTML) or how to find the one main lobby (H1) just by asking for that one specific place, but if you want to get to a specific office inside that building you will need more information.
If you know it’s the third office on the right from the elevator, that’s a start, but you also need to know which floor. You many need to know if you are going to the same room on several floor (if you are doing electrical maintenance on every floor for example) and more. As soon as you are trying to navigate inside the building, the locators get just a bit more complex.
Many websites use dynamic CSS Selectors, kind of like if a different company moved into an office every month and only gave the company name on the elevator buttons (for example ACME Consultants). In that case, you will need even more information because if you go to press the Acme Consultants button next month, and there is no such button, the elevator will not take you anywhere. You need to find a way to interpret the address of the office of ACME Consultants so that when the occupant changes, you can still find the physical office. Not a perfect analogy, but I hope you see the point.
CSS selectors and locators allow you to specify exactly which element on a page to act on. They are also closely related to XPath.
Here are a couple of resources on using them:
Diana at Zerowork has an excellent Crash Course on Custom Selectors that I suggest you watch to get a better understanding.
There are numerous Cheatsheets available online to help you in your journey. . I am including some below.
Here are links to cheatsheets that may help you build robust selectors:
