Selenium Passkeys E2E Testing in Node.js

Selenium Passkeys E2E Testing in Node.js

This tutorial explains how to use Selenium for automated E2E testing of passkey solutions in Node.js.

Buy vs. Build Guide

Practical guidance, rollout patterns and KPIs for passkey programs.

Get Whitepaper

Key Facts

1. Introduction

The most secure and most convenient passwordless authentication method are passkeys which are gaining prominence. While they bring a lot of benefits, they also present testing challenges due to their reliance on physical authenticators (e.g. Face ID, Touch ID, Windows Hello). Thankfully, Selenium's Virtual Authenticator enables developers to automate passkey flow testing without physical devices. For a complete overview of enterprise passkey testing strategies - including manual QA, device matrices and performance testing - see our dedicated guide.

This blog post will guide you by answering some related questions:

Passkeys Cheatsheet. Practical guidance, rollout patterns and KPIs for passkey programs.

Get Cheat Sheet

2. Background Information to Get Started

In the following, you find some relevant background information to get you started.

2.1 Why Automate Passkey Testing?

WebAuthn-based passkeys are essential for building secure and convenient authentication flows. Testing them manually, however, can be time-consuming and error-prone, especially with different devices and user flows. Automating these tests ensures that your application works seamlessly under various scenarios, including:

With Selenium WebDriver, you can simulate these flows using a Virtual Authenticator, allowing for robust test automation across your web app.

2.2 Why Choose Selenium for Passkey Testing?

Selenium is a powerful choice for automating passkey authentication testing due to several key advantages:

2.2.1 Minimum Browser Versions

To ensure full compatibility for passkey testing, the following minimum browser versions are required for Selenium 4:

- **Chrome**: Version 75+ [[source]](https://www.selenium.dev/documentation/webdriver/browsers/chrome/).
- **Firefox:** Version 78+ [[source]](https://www.selenium.dev/documentation/webdriver/browsers/firefox/).
- **Safari**: For Safari versions 10 and above, SafariDriver comes bundled by default with the browser preinstalled in macOS. Earlier versions required the Safari WebDriver extension, which is no longer supported for testing. [[source]](https://www.browserstack.com/guide/run-selenium-tests-on-safari-using-safaridriver)
- **Edge**: Version 79+ [[source]](https://www.selenium.dev/documentation/webdriver/browsers/edge/).

Selenium 3: While it's technically possible to use passkeys in Selenium 3, the lack of native support requires numerous workarounds and unconventional methods.

2.2.2 Why Mocha?

Mocha is a JavaScript test framework known for running tests asynchronously. It supports both synchronous and asynchronous code, providing a flexible structure for test suites, making it a solid choice for Selenium-based end-to-end testing.

Overall, Selenium’s flexibility and reliability make it ideal for robust passkey testing across different platforms and scenarios.

2.3 How Does Selenium’s Virtual Authenticator Work?

The Virtual Authenticator in Selenium allows you to simulate roaming authenticators like hardware security keys (e.g. YubiKeys) or built-in platform authenticators (e.g., Touch ID, Face ID) when testing WebAuthn flows. This feature is crucial for automating passkey registration and login processes without needing real physical devices.

Key aspects of the Virtual Authenticator:

How the Virtual Authenticator Handles Passkey / WebAuthn Challenges

The Virtual Authenticator in Selenium directly intercepts passkey authentication / WebAuthn challenges during testing. When a web application sends a challenge as part of a WebAuthn request, the virtual authenticator captures it, signs it with its configured private key, and returns the signed response to the application. This process mimics a real physical authenticator's handling of such challenges.

3. Implementation

3.1 Prerequisites

Before we dive into setting up the tests, ensure that you have the following tools and knowledge:

  1. Node.js and npm installed. Install Node.js from the official website.
  2. Familiarity with Node.js and Selenium WebDriver.
  3. Basic knowledge of WebAuthn and passkey authentication.

Required Libraries and Tools

3.3 Setting Up Selenium for Passkey Testing

Follow these steps to set up Selenium for automated passkey testing.

Step 1: Installing Selenium WebDriver

To interact with the browser using Selenium, install the selenium-webdriver package via npm:

npm install selenium-webdriver

Step 2: Setting Up Mocha

For structuring our tests, we’ll use Mocha. Install Mocha with:

npm install mocha

Mocha offers a flexible framework for organizing and running test suites, making it an excellent choice for Selenium-based end-to-end testing.

Step 3: Your First Test Script

Now, let’s create a basic test script using Mocha and Selenium WebDriver. This test will include WebAuthn interaction via a virtual authenticator.

Create a test file named test.spec.js and add the following code to interact with the browser, perform basic navigation, and execute fundamental Passkey Creation and Authentication:

const { Builder, By, until } = require("selenium-webdriver");
const {
    VirtualAuthenticatorOptions,
    Transport,
    Protocol,
} = require("selenium-webdriver/lib/virtual_authenticator");
const mocha = require("mocha");

const { describe, it, before } = mocha;

describe("Passkey Authentication Tests", function () {
    this.timeout(10000);
    const timeOut = 5000;
    let driver;

before(async function () {
        driver = await new Builder().forBrowser("chrome").build();

// Set up the virtual authenticator with the desired options
        let options = new VirtualAuthenticatorOptions();
        options.setProtocol(Protocol.CTAP2);
        options.setTransport(Transport.INTERNAL);
        options.setHasUserVerification(true);
        options.setIsUserVerified(true);
        options.setHasResidentKey(true);

// Add the virtual authenticator to the WebDriver
        await driver.addVirtualAuthenticator(options);
    });

it("should load the login page", async function () {
        await driver.get("https://passkeys.eu");

const emailField = await driver.wait(
            until.elementLocated(By.id("email")),
            timeOut,
        );

await emailField.sendKeys(`test+${Date.now()}@test.com`);

await emailField.submit();

await driver.wait(
            until.elementLocated(By.className("cb-passkey-list-container")),
            timeOut,
        );
    });
});

Run the test using Mocha:

npx mocha test.spec.js

The test opens a Chrome browser window and automatically navigates to https://passkeys.eu

It then types in a randomized email and submits it.

This will trigger the passkey challenge, which the virtual authenticator will handle automatically.

Finally, you're successfully logged in and can view the newly created passkey.

To maximize the potential of Selenium WebDriver for simulating user actions and detecting DOM changes, explore their documentation thoroughly. Focus on these crucial areas:

Conclusion

Selenium WebDriver's Virtual Authenticator provides a robust tool for automating passkey-related authentication flows in web applications. By simulating various scenarios - including successful registration, login, and authentication failures - developers can ensure their applications are resilient and handle most WebAuthn interactions correctly.

About Corbado

Corbado is the Passkey Intelligence Platform for large-scale CIAM teams running consumer authentication.