Fix/custom flow click issue when two or more matched elements (#187)

* Fix custom flow issue when there are two or more matched elements

* Upgrade playwright to 1.38.1, bump package version

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@govtechsg/purple-hats",
   "main": "npmIndex.js",
-  "version": "0.9.20",
+  "version": "0.9.21",
   "type": "module",
   "imports": {
     "#root/*.js": "./*.js"
@@ -20,7 +20,7 @@
     "jsdom": "^21.1.2",
     "lodash": "^4.17.21",
     "pdfjs-dist": "github:veraPDF/pdfjs-dist#v2.14.305-taggedPdf-0.1.11",
-    "playwright": "1.37.1",
+    "playwright": "1.38.1",
     "print-message": "^3.0.1",
     "safe-regex": "^2.1.1",
     "validator": "^13.7.0",

playwrightAxeGenerator.js

@@ -270,7 +270,8 @@ const processPage = async page => {
 
 const clickFunc = async (elem,page) => {
   const numElems = await elem.count(); 
-
+  consoleLogger.info(\`Number of matched elements: \${numElems}\`);
+  
   const waitForElemIsVisible = async (elem, duration) => {
     try {
       await elem.waitFor({state: "visible", timeout: duration});
@@ -308,7 +309,7 @@ const clickFunc = async (elem,page) => {
   } else if (numElems === 0) {
       await elem.click();
 
-  } else for (let index = 0; index < numElems; index++) {
+  } else for (let index = numElems - 1; index >= 0; index--) {
       const nth = await elem.nth(index); 
       if (! await nth.isVisible()) {
         await hoverParentAndClickElem(nth, page);