Merge branch 'main' of https://github.com/gunet/puppeteer

README.md

@@ -47,6 +47,12 @@ console.log(url[0]);
     - `page` element
     - `selector`
   - Example: `await cas.assertVisibility(page, '#token')`
+* `waitForVisible`
+  - Wait until an element is visible instead of naively waiting for specified time hopping for the page to have loaded
+  - Arguments
+    - `page` element
+    - `selector`
+  - Example: `await this.waitForVisible(page, '#username')`
 * `assertInnerText`
   - Check that a certain text is present (with **equality** check)
   - Arguments
@@ -107,6 +113,7 @@ console.log(url[0]);
   - Example: ```await gunet.casLogin(page, `${process.env.CAS_USER}`,`${process.env.CAS_PASSWORD}`,`${process.env.CAS_LANG}`);```
 
 ## Usage
+* Build: `docker compose -f docker-compose.build.yaml build`
 ### Customization
 * If you just want to use `docker run` you can volume mount the `scenarios` folder as `-v <your scenarios folder>:/home/puppeteer/scenarios`
   - Your JS script will have to include a `const gunet = require('../gunet.js');` in order to use the GUNet libraries

docker-compose.build.yaml

@@ -0,0 +1,13 @@
+version: '3.0'
+
+services:
+  puppeteer:
+    image: gunet/puppeteer
+    build:
+      context: .
+      dockerfile: Dockerfile
+  puppeteer-ghcr:
+    image: ghcr.io/gunet/puppeteer
+    build:
+      context: .
+      dockerfile: Dockerfile

gunet.js

@@ -82,6 +82,9 @@ exports.uploadImage = async (imagePath) => {
 exports.loginWith = async (page, user, password,
                            usernameField = "#username",
                            passwordField = "#password") => {
+    console.log('Checking for username and password field visibility')
+    await this.waitForVisible(page, usernameField)
+    await this.waitForVisible(page, passwordField)
     console.log(`Logging in with ${user} and ******`);
     await this.type(page, usernameField, user);
     await this.type(page, passwordField, password);
@@ -97,6 +100,12 @@ exports.fetchGoogleAuthenticatorScratchCode = async (user = "casuser") => {
         });
     return JSON.stringify(JSON.parse(response)[0].scratchCodes[0]);
 }
+
+// based on https://stackoverflow.com/a/55212494
+exports.waitForVisible = async (page, selector) => {
+    await page.waitForSelector(selector, {visible: true})
+}
+
 exports.isVisible = async (page, selector) => {
     let element = await page.$(selector);
     console.log(`Checking visibility for ${selector}`);