How to fix ChromeDriver version mismatch error when you run Behat tests

When the chrome browser gets updated automatically on your computer, the ChromeDriver version is not going to be updated. Therefore, it causes the mismatch between the chrome browser and the ChromeDriver version.

In the context of Behat tests, ChromeDriver allows Behat to control Chrome (e.g. enabling it to move around the browser and do actions like clicks). Therefore, if the version of the driver mismatches that of the browser, Behat cannot control the browser and you get the error like below:

┌─ @BeforeSuite # Behat\PantherContext::setup()
│
╳  session not created: This version of ChromeDriver only supports Chrome version 87
╳  Current browser version is 89.0.4389.90 with binary path /Applications/Google Chrome.app/Contents/MacOS/Google Chrome (Facebook\WebDriver\Exception\SessionNotCreatedException)

The fix is easy. We just need to upgrade chrome driver. The below command is for Mac.

# what we need is to upgrade the driver
brew upgrade chromedriver

# Then, add permission
xattr -d com.apple.quarantine /usr/local/bin/chromedriver

# We can check the version
/usr/local/bin/chromedriver --version

With Behat, we can actually specify the chrome driver path with PANTHER_CHROME_DRIVER_BINARY argument.

PANTHER_CHROME_DRIVER_BINARY=/usr/local/bin/chromedriver ...
Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …