Pre release (#9)

* Improved documentation for all nodes

* Removed querySelector.html(js)

* Moved content node to Puppeteer section

* Updated download.html documentation

* Added Release Package github workflow

* Updated README.md

* Added CHANGELOG

.github/workflows/release_package.yml

@@ -0,0 +1,95 @@
+name: Release package
+on:
+ workflow_dispatch:
+ inputs:
+ release-type:
+ description: 'Release type (one of): patch, minor, major, prepatch, preminor, premajor, prerelease'
+ required: true
+jobs:
+ release:
+ runs-on: ubuntu-latest
+ steps:
+ # Checkout project repository
+ - name: Checkout
+ uses: actions/[email protected]
+
+ # Setup Node.js environment
+ - name: Setup Node.js
+ uses: actions/setup-node@v2
+ with:
+ registry-url: https://registry.npmjs.org/
+ node-version: '14'
+
+ # Configure Git
+ - name: Git configuration
+ run: |
+ git config --global user.email "[email protected]"
+ git config --global user.name "rristov60"
+
+ # Bump package version
+ # Use tag latest
+ - name: Bump release version
+ if: startsWith(github.event.inputs.release-type, 'pre') != true
+ run: |
+ echo "NEW_VERSION=$(npm --no-git-tag-version version $RELEASE_TYPE)" >> $GITHUB_ENV
+ echo "RELEASE_TAG=latest" >> $GITHUB_ENV
+ env:
+ RELEASE_TYPE: ${{ github.event.inputs.release-type }}
+
+ # Bump package pre-release version
+ # Use tag beta for pre-release versions
+ - name: Bump pre-release version
+ if: startsWith(github.event.inputs.release-type, 'pre')
+ run: |
+ echo "NEW_VERSION=$(npm --no-git-tag-version --preid=beta version $RELEASE_TYPE
+ echo "RELEASE_TAG=beta" >> $GITHUB_ENV
+ env:
+ RELEASE_TYPE: ${{ github.event.inputs.release-type }}
+
+ # Update changelog unreleased section with new version
+ - name: Update changelog
+ uses: superfaceai/release-changelog-action@v1
+ with:
+ path-to-changelog: CHANGELOG.md
+ version: ${{ env.NEW_VERSION }}
+ operation: release
+
+ # Commit changes
+ - name: Commit CHANGELOG.md and package.json changes and create tag
+ run: |
+ git add "package.json"
+ git add "CHANGELOG.md"
+ git commit -m "chore: release ${{ env.NEW_VERSION }}"
+ git tag ${{ env.NEW_VERSION }}
+
+ # Publish version to public repository
+ - name: Publish
+ run: yarn publish --verbose --access public --tag ${{ env.RELEASE_TAG }}
+ env:
+ NODE_AUTH_TOKEN: ${{ secrets.NPMJS_ACCESS_TOKEN }}
+
+ # Push repository changes
+ - name: Push changes to repository
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ run: |
+ git push origin && git push --tags
+
+ # Read version changelog
+ - id: get-changelog
+ name: Get version changelog
+ uses: superfaceai/release-changelog-action@v1
+ with:
+ path-to-changelog: CHANGELOG.md
+ version: ${{ env.NEW_VERSION }}
+ operation: read
+
+ # Update GitHub release with changelog
+ - name: Update GitHub release documentation
+ uses: softprops/action-gh-release@v1
+ with:
+ tag_name: ${{ env.NEW_VERSION }}
+ body: ${{ steps.get-changelog.outputs.changelog }}
+ prerelease: ${{ startsWith(github.event.inputs.release-type, 'pre') }}
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## Unreleased
+Initial release
+
+### Added
+- Changelog

README.md

@@ -1,4 +1,4 @@
-# node-red-contrib-puppeteer-new
+# @digitalnodecom/node-red-contrib-puppeteer
 
 ### Warning & Important!
 
@@ -14,18 +14,22 @@ Chrome browser automation (puppeteer) in node-red.
 
 # Credits
 
-## fork from
+## Original fork
 
 Thank you [oliverlorenz](https://github.com/oliverlorenz)! Pickup update from node-red-contrib-puppeteer
 
+## Forked from
+
+Thank you [d0uub](https://github.com/d0uub/)! Pickup update from node-red-contrib-puppeteer
+
 ## Screenshorts Node
 
 Copy from [node-red-contrib-image-tools (node) - Node-RED (nodered.org)](https://flows.nodered.org/node/node-red-contrib-image-tools)
 
 ## Icons
 
-by [fontawesome](https://fontawesome.com/license) 
+By [fontawesome](https://fontawesome.com/license)
 
 ## Palettes
 
-by [coolors.co](https://coolors.co/palette/ef476f-ffd166-06d6a0-118ab2-073b4c)
+By [coolors.co](https://coolors.co/palette/ef476f-ffd166-06d6a0-118ab2-073b4c)

package.json

@@ -1,20 +1,24 @@
 {
- "name": "node-red-contrib-puppeteer-new",
+ "name": "@digitalnodecom/node-red-contrib-puppeteer",
  "version": "0.3.7",
  "description": "NodeRED nodes to control a headless chrome with puppeteer",
  "main": "index.js",
  "scripts": {},
- "author": "Roy Chan <[email protected]>",
+ "author": {
+ "name": "Riste Ristov",
+ "email": "[email protected]",
+ "url": "https://riste.mk"
+ },
  "license": "MIT",
  "dependencies": {
  "puppeteer": "^13.5.1"
  },
  "bugs": {
- "url": "https://github.com/d0uub/node-red-contrib-puppeteer-new/issues"
+ "url": "https://github.com/digitalnodecom/node-red-contrib-puppeteer/issues"
  },
  "repository": {
  "type": "git",
- "url": "https://github.com/d0uub/node-red-contrib-puppeteer-new"
+ "url": "https://github.com/digitalnodecom/node-red-contrib-puppeteer"
  },
  "keywords": [
  "chrome",

puppeteer/browser/close.html

@@ -20,6 +20,15 @@
  <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
  <input type="text" id="node-input-name" style="width:70%;" placeholder="Name" />
  </div>
+ <div class="form-tips">
+ <span data-i18n="[html]tip1">
+ This node closes chromium browser instance provided with <code>puppeteer.browser</code> object
+ </span>
+ </div>
 </script>
 
-<script type="text/x-red" data-help-name="puppeteer-browser-close"></script>
+<script type="text/x-red" data-help-name="puppeteer-browser-close">
+ <p>Close chromium browser instance</p>
+ <h3>Details</h3>
+ <p>This node closes chromium browser instance provided with <code>puppeteer.browser</code> object</p>
+</script>

puppeteer/browser/launch.html

@@ -68,8 +68,8 @@
  <li><code>sameParty: <span style="color: blue">boolean</span> | <u style="color: orange">optional</u>, </br> <span style="color: black"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Default value: false</span></code></li>
  <li><code>sourceScheme: <span style="color: blue">string</span> | <u style="color: orange">optional</u>, </br> <span style="color: black"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Default value: 'NonSecure'</span></code></li>
  <li><code>sourcePort: <span style="color: blue">number</span> | <u style="color: orange">optional</u>, </br> <span style="color: black"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Default value: 80</span></code></li>
+ </ul>
  </span>
-
  </div>
 </script>
 

puppeteer/browser/newPage.html

@@ -9,17 +9,27 @@
  outputs: 1,
  icon: "newtab.svg",
  label: function () {
- return this.name || "New Tab";
+ return this.name || "New Page";
  },
- paletteLabel: "New Tab",
+ paletteLabel: "New Page",
  });
+
 </script>
 
 <script type="text/x-red" data-template-name="puppeteer-browser-newPage">
  <div class="form-row">
  <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
  <input type="text" id="node-input-name" style="width:70%;" placeholder="Name" />
  </div>
+ <div class="form-tips">
+ <span data-i18n="[html]tip1">
+ This node creates/opens new page(tab) in existing chromium instance or rather <code>puppeteer.browser</code> object
+ </span>
+ </div>
 </script>
 
-<script type="text/x-red" data-help-name="puppeteer-browser-newPage"></script>
+<script type="text/x-red" data-help-name="puppeteer-browser-newPage">
+ <p>Open new page(tab) in chromium browser</p>
+ <h3>Details</h3>
+ <p>This node creates/opens new page(tab) in existing chromium instance or rather <code>puppeteer.browser</code> object</p>
+</script>

puppeteer/page/click.html

@@ -66,6 +66,12 @@
  <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
  <input type="text" id="node-input-name" style="width:70%;" placeholder="Name" />
  </div>
+ <div class="form-tips">
+ <span data-i18n="[html]tip1">
+ This node clicks on a specified selector. It fetches an element which matches the provided <code>selector</code>, scrolls it into view if needed and then uses <code>page.mouse</code> to click the element.
+ If there's no element matching <code>selector</code>, the node throws an error.
+ </span>
+ </div>
 </script>
 
 <script type="text/x-red" data-help-name="puppeteer-page-click">
@@ -82,6 +88,6 @@ <h3>Inputs</h3>
  <dd>Specify custom debugging port. Pass <code>0</code> to discover a random port. Defaults to <code>0</code>.Time to wait between <code>mousedown</code> and <code>mouseup</code> in milliseconds. Defaults to 0.</dd>
  </dl>
  <h3>Details</h3>
- <p>This method fetches an element with <code>selector</code>, scrolls it into view if needed, and then uses <code>page.mouse</code> to click in the center of the element.
- If there's no element matching <code>selector</code>, the method throws an error.</p>
+ <p>This node fetches an element with <code>selector</code>, scrolls it into view if needed, and then uses <code>page.mouse</code> to click in the center of the element.
+ If there's no element matching <code>selector</code>, the node throws an error.</p>
 </script>

puppeteer/page/close.html

@@ -15,11 +15,20 @@
  });
 </script>
 
-<script type="text/x-red" data-template-name="puppeteer-page-close"></script>
-
 <script type="text/x-red" data-help-name="puppeteer-page-close">
  <div class="form-row">
  <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
  <input type="text" id="node-input-name" style="width:70%;" placeholder="Name" />
  </div>
+ <div class="form-tips">
+ <span data-i18n="[html]tip1">
+ This node closes first chromium page(tab) provided with <code>puppeteer.browser</code> object
+ </span>
+ </div>
 </script>
+
+<script type="text/x-red" data-template-name="puppeteer-page-close">
+ <p>Close first chromium page(tab)</p>
+ <h3>Details</h3>
+ <p>This node closes first chromium page(tab) provided with <code>puppeteer.browser</code> object</p>
+</script>

puppeteer/page/content.html

@@ -1,6 +1,6 @@
 <script type="text/javascript">
  RED.nodes.registerType("puppeteer-page-content", {
- category: "puppeteerpage",
+ category: "Puppeteer",
  color: "#118ab2",
  defaults: {
  name: { value: "" },
@@ -20,6 +20,15 @@
  <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
  <input type="text" id="node-input-name" style="width:70%;" placeholder="Name" />
  </div>
+ <div class="form-tips">
+ <span data-i18n="[html]tip1">
+ This node gets page's content from <code>puppeteer.page</code> object
+ </span>
+ </div>
 </script>
 
-<script type="text/x-red" data-help-name="puppeteer-page-content"></script>
+<script type="text/x-red" data-help-name="puppeteer-page-content">
+ <p>Get content from page</p>
+ <h3>Details</h3>
+ <p>This node gets page's content from <code>puppeteer.page</code> object</p>
+</script>

puppeteer/page/download.html

@@ -86,7 +86,7 @@
  <input type="text" id="node-input-name" style="width:70%;" placeholder="Name" />
  </div>
  <div class="form-tips">
- <span data-i18n="[html]tip1">This node downloads a file by clicking on a specified selector. Essetially that can be done with the click node as well, but here you can specify download location and also if this node is followed by rename node with specified download path and filename, it can change the filename directly, but in order to get this to work, in the rename node the old file path needs to be set to <code>msg.old</code> and the new file path needs to be set to <code>msg.new</code>. The output of this node is a <b>msg</b> which contains <code>msg.puppeteer</code>, <code>msg.new & msg.old</code> (<b><u style="text-decoration-color: #fe6d73">only when download path and file path are specified</u></b>) and <code>msg.error</code> when an error ocurred.
+ <span data-i18n="[html]tip1">This node downloads a file by clicking on a specified selector. Essetially that can be done with the click node as well, but here you can specify download location and also if this node is followed by rename node<b><u><i>(in storage section)</i></u></b> with specified download path and filename, it can change the filename directly, but in order to get this to work, in the rename node<b><u><i>(in storage section)</i></u></b> the old file path needs to be set to <code>msg.old</code> and the new file path needs to be set to <code>msg.new</code>. The output of this node is a <b>msg</b> which contains <code>msg.puppeteer</code>, <code>msg.new & msg.old</code> (<b><u style="text-decoration-color: #fe6d73">only when download path and file path are specified</u></b>) and <code>msg.error</code> when an error ocurred.
  </div>
 </script>
 
@@ -103,11 +103,11 @@ <h3>Inputs</h3>
  <dt>Download path<span class="property-type">string</span></dt>
  <dd>Specify custom download path. Leave the field blank for default download path. Defaults to user's default browser download path.</dd>
  <dt>File name<span class="property-type">string</span></dt>
- <dd>Specify custom file name. Leave the field blank for default file name. Please note that in order for this to work this node needs to be followed by the rename node. Defaults to default file name.</dd>
+ <dd>Specify custom file name. Leave the field blank for default file name. Please note that in order for this to work this node needs to be followed by the rename node<b><u><i>(in storage section)</i></u></b>. Defaults to default file name.</dd>
  </dl>
  <h3>Details</h3>
  <p>This method fetches an element with <code>selector</code>, scrolls it into view if needed, and then uses <code>page.mouse</code> to click in the center of the element.
  If there's no element matching <code>selector</code>, the method throws an error. The main difference between this and click node is that with this node you can specify
- download path and file name. But, in order the custom filename to work, this node must have download path and file name specified and be followed by a rename node where
+ download path and file name. But, in order the custom filename to work, this node must have download path and file name specified and be followed by a rename node<b><u><i>(in storage section)</i></u></b> where
  the old file path should be set to <code>msg.old</code> and the new file path should be set to <code>msg.new</code></p>
 </script>

puppeteer/page/focus.html

@@ -40,6 +40,17 @@
  <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
  <input type="text" id="node-input-name" style="width:70%;" placeholder="Name" />
  </div>
+ <div class="form-tips">
+ <span data-i18n="[html]tip1">
+ This node fetches an element with <code>selector</code> and puts it in focus.
+ If there's no element matching <code>selector</code>, the node throws an error.
+ </span>
+ </div>
 </script>
 
-<script type="text/x-red" data-help-name="puppeteer-page-focus"></script>
+<script type="text/x-red" data-help-name="puppeteer-page-focus">
+ <p>Focus on element</p>
+ <h3>Details</h3>
+ <p>This node fetches an element with <code>selector</code> and puts it in focus.
+ If there's no element matching <code>selector</code>, the node throws an error.</p>
+</script>

puppeteer/page/get.html

@@ -55,6 +55,17 @@
  <input id="node-input-property"></input>
  <input type="hidden" id="node-input-propertytype"></input>
  </div>
+ <div class="form-tips">
+ <span data-i18n="[html]tip1">
+ This node fetches a specified <code>property</code> value from element with specified <code>selector</code>
+ If there's no element matching the <code>selector</code>, the node throws an error.
+ </span>
+ </div>
 </script>
 
-<script type="text/x-red" data-help-name="puppeteer-page-get-value"></script>
+<script type="text/x-red" data-help-name="puppeteer-page-get-value">
+ <p>Get property value from element</p>
+ <h3>Details</h3>
+ <p>This node fetches a specified <code>property</code> value from element with specified <code>selector</code>
+ If there's no element matching the <code>selector</code>, the node throws an error.</p>
+</script>

puppeteer/page/goto.html

@@ -50,6 +50,18 @@
  <option value="networkidle2">networkidle2</option>
  </select>
  </div>
+ <div class="form-tips">
+ <span data-i18n="[html]tip1">
+ This node visits specified URL. There are three inputs from which the <code>Name</code> and <code>URL</code> are self-explanatory.
+ The <code>Wait Until</code> input on the other hand has some additional values that need to be further explained, and they are the following:
+ <ul>
+ <li><code>load</code> - consider navigation to be finished when the load event is fired</li>
+ <li><code>domcontentloaded</code> - consider navigation to be finished when the DOMContentLoaded event is fired</li>
+ <li><code>networkidle0</code> - consider navigation to be finished when there are no more than 0 network connections for at least 500 ms</li>
+ <li><code>networkidle2</code> - consider navigation to be finished when there are no more than 2 network connections for at least 500 ms</li>
+ </ul>
+ </span>
+ </div>
 </script>
 
 <script type="text/x-red" data-help-name="puppeteer-page-goto">