Update dev test CI, update README

.github/workflows/dev-to-master-PR-commnet-test.yml

@@ -22,3 +22,25 @@ jobs:
         releaseId: 67887023
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: screenshots-ci-action-waitForSelector
+      uses: flameddd/screenshots-ci-action@dev
+      with:
+        url: https://flameddd.github.io/screenshots-ci-action-test-waitForSelector/
+        noDesktop: true
+        devices: iPhone 6
+        waitForSelector: '#waitForElement'
+        releaseId: 67887023
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    - name: screenshots-ci-action-waitForSelector-wrongSelector
+      uses: flameddd/screenshots-ci-action@dev
+      with:
+        url: https://flameddd.github.io/screenshots-ci-action-test-waitForSelector/
+        noDesktop: true
+        devices: iPhone 6
+        waitForSelector: '.waitForElement'
+        releaseId: 67887023
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+

README.md

@@ -11,14 +11,18 @@ Generate a website screenshots in different viewpoint, devices.
 | `noCommitHashFileName`(boolean) | optional(`false`) | Set `true`, the filename would not have commit hash. |
 | `type`(string) | optional(`jpeg`) | Specify screenshot type, can be either `jpeg` or `png`. |
 | `waitUntil`(string) | optional(`networkidle0`) | When to consider navigation succeeded. <br> - `load`: consider navigation to be finished when the load event is fired.<br> - `domcontentloaded`: consider navigation to be finished when the DOMContentLoaded event is fired.<br> - `networkidle0`: consider navigation to be finished when there are no more than 0 network connections for at least `500` ms.<br> - `networkidle2`: consider navigation to be finished when there are no more than 2 network connections for at least `500` ms. <br><br> Consider set to `networkidle2` when target website has **long polling request**.|
+| `waitForSelector`(string) | optional(`''`) | Wait for the **selector** to appear in page. If the **selector** doesn't appear after the `waitForSelectorTimeout` of waiting, it will take screenshots immediately. <br> See [README.waitForSelector](/README.waitForSelector.md) for example |
+| `waitForSelectorTimeout`(number) | optional(`30000`) | **WaitForSelector Options:** <br> Maximum time to wait in milliseconds. Pass `0` to disable timeout. <br> - `30000` means 30 seconds |
+| `waitForSelectorVisible`(boolean) | optional(`false`) | **WaitForSelector Options:** <br> Wait for the selected element to be present in DOM and to be visible, i.e. to not have `display: none` or `visibility: hidden` CSS properties. |
+| `waitForSelectorHidden`(boolean) | optional(`false`) | **WaitForSelector Options:** <br> Wait for the selected element to not be found in the DOM or to be hidden, i.e. have `display: none` or `visibility: hidden` CSS properties. |
 | `releaseId`(string) | optional(`"`) | Github Release Id, it's required to upload screenshots to PR comment. see [README.PR](/README.PR.md) for more detail |
 
 ## Envs
 | Name(type) | required(default) | Description |
 | ------------- | ------------- | ------------- |
 | `TELE_CHAT_ID`(string) | optional(`""`) | Integration with **Telegram**. `screenshots-ci-action` will send screenshots to telegram. see [README.Telegram](/README.Telegram.md) for setting detail. |
 | `TELE_BOT_TOKEN`(string) | optional(`""`) | Integration with **Telegram**. `screenshots-ci-action` will send screenshots to telegram. see [README.Telegram](/README.Telegram.md) for setting detail. |
-| `GITHUB_TOKEN`(string) | optional(`""`) | Github Actions Tokens, it's required to upload screenshots to PR comment. see [README.PR](/README.PR.md) for more detail |
+| `GITHUB_TOKEN`(string) | optional(`""`) | Github Actions Tokens, it's required to upload screenshots to PR comment. See [README.PR](/README.PR.md) for more detail |
 
 ## Output screenshots
 There are **3** different way to output files

README.waitForSelector.md

@@ -0,0 +1,33 @@
+# waitForSelector example
+
+
+
+```yaml
+name: screenshots ci actions
+on:
+  push:
+    branches:
+    - master
+
+jobs:
+  screenshots:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: install puppeteer-headful
+      uses: mujo-code/puppeteer-headful@master
+      env:
+        CI: 'true'
+    - name: screenshots-ci-action
+      uses: flameddd/screenshots-ci-action@master
+      with:
+        url: https://flameddd.github.io/screenshots-ci-action-test-waitForSelector/
+        noDesktop: true
+        devices: iPhone 6
+        waitForSelector: '#waitForElement'
+        waitForSelectorTimeout: 5000
+    - uses: actions/upload-artifact@v2
+      with:
+        path: screenshots
+        name: Download-screenshots
+```