• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

How To Test Your Web Applications Using Playwright and Support 2fa Tokens

Javascript, Playwright · September 2, 2022

At work, I’ve been migrating us over from Cypress to Playwright for end-to-end tests. In that time, we’ve enabled two-factor authentication functionality in our application for security.

These TOTP tokens are great for security but provide an additional challenge for testing.

While Playwright supports saving state, our application tokens have a short expiry. I needed to log in to our application, enter a one-time password, and test.

The logging-in part was easy. We created development environment credentials. But because 2fa is enabled in all environments, we still had the issue of needing a TOTP token.

Well, there is a way to use a Node.js package for generating tokens: Totp Generator. All you need is your private seed key to generate token values and pass it to the package to generate a valid TOTP token.

My global setup file looks like this:

import { chromium, FullConfig } from '@playwright/test';

import totp from 'totp-generator';
const token = totp('JVGEGDFGDBFSDFDHHGVCHGHDASDRWERRTY');

async function globalSetup(config: FullConfig) {
  const { baseURL, storageState } = config.projects[0].use;
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  await page.goto(baseURL!);

  await page.locator('input[name="loginEmail"]').fill('someemail@gmail.com');
  await page.locator('input[name="loginPassword"]').fill('password!');
  await page.locator('text=Sign In').click();

  const twoFactorField = await page.locator('input[placeholder="Enter the 6-digit Code"]');
  if (twoFactorField.isVisible()) {
    await twoFactorField.fill(token);
    await page.locator('button[name="loginButton"]').click();
  }
  
  await page.context().storageState({ path: storageState as string });
  await browser.close();
}

export default globalSetup;

In this logic, we determine if we require an OTP, and if we do, we generate a token value to log in and perform our test. Most of the logic is the totp import at the top and the function call.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How To Decompile And Compile Android APK's On A Mac Using Apktool
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz