Adapt browser drivers to be compatible with latest 4.x selenium-websdriver version

[nachocodoner]

As reported in this issue #36, browser drivers are not working anymore for latest selenium-webdriver versions.

In this PR I attempt to support them again to be up to date with latest selenium version 4.x.

I adapted the code to use the newer API from selenium and also tweaked the logs displaying since latest version introduce breaking on logs as they are sent to be formatted using placeholders (%s %d and so on).

• Review chromedriver
• Why colors are not showing? It may just be an issue with my env as I already experienced.

Demo

Running sucessfully

Running with errors

[StorytellerCZ]

Awesome! If you can fix the colors issue, then I'm happy to merge this. I think the review of other drivers should be done in separate PRs to keep things clean and make it easier to merge.

[nachocodoner]

I have not used chromedriver myself on the projects I have worked on. I am not sure if it is expected to see the colors. The way we listen for the logs, and the logs data, don't provide any formatted color string or something to achieve it, so I think it may have been like this for ever. I have done a bit of research and didn't find any references yet.

When using puppeteer however, I see we listen the page console.logs and these already include the color formatting. This is the driver I use daily.

[klablink]

@nachocodoner I use this function to format log messages:

          if (entry.level.name === 'SEVERE') {
            stderr(`[ERROR] ${message}`);
          } else {

            function extractArgs(str) {
              let rex = /"([^"]*)"|(\b\d+\b)/g;
              let match;
              let args = [];
              while ((match = rex.exec(str)) !== null) {
                let stringArg = match[1];
                let numberArg = match[2];
                if (stringArg !== undefined) {
                  // string argument found (can be empty)
                  args.push(stringArg);
                } else if (numberArg !== undefined) {
                  // number argument found
                  args.push(Number(numberArg));
                }
              }
              return args;
            }

            const [, , , ...args] = extractArgs(message);
            let formattedMessage = util.format.apply(null, args);

            const messageLines = formattedMessage.split('\\n');
            messageLines.forEach(messageLine => {
              stdout(messageLine);
            });
          }

The result is this:

[nachocodoner]

Do you think that formatter cover more cases? I like more how you processed more using regexes.

What about the green check? I will check on my end if I get that one, but I think it depends on your terminal or env config. Because as far as I understand in your formatter I cant see that emoji to be included. So I still think Chrome output is not coloured formatted at all.

[klablink]

Hi, @nachocodoner , in my case, the emoji is already included in the message coming from the browser. There is not much documentation about it but the format is quite simple, I have tried it in projects with many tests and it seems to work. The only thing you can't do easily is insert carriage returns between the lines.

At the very least, one could insert an environment variable to have one or the other formatting.

[nachocodoner]

@klablink Thanks for the implementation. By using regex in that way we will cover mostly all scenarios in a neat way. Moreover, you have been able to test it for large amount of tests cases.

I did change the implementation and test it myself, it is works perfectly.

Regarding the colors/emoji, I don't see them though, so I believe it depends on the different OS and browser. @StorytellerCZ, it seems to not be something we can't control well. The API doesn't provide us a way. I would suggest to review this one and merge, then I will continue with the other drivers.

[StorytellerCZ]

LGTM, merging and releasing as a patch version.