DEV Community: Lewis

Using Selenium Webdriver with Python's unittest framework

Lewis — Tue, 25 Feb 2025 11:41:46 +0000

In this tutorial, we'll be going over how to use Selenium Webdriver with Python's unittest framework. We'll use webdriver-manager to automatically download and install the latest version of Chrome.

Installing the packages

First off, we'll need to install the required packages:

pip install webdriver-manager selenium
# or if you prefer to use poetry
poetry add webdriver-manager selenium

Setting up the test package

Next, we'll create a test directory and add an empty __init__.py file to it. Python automatically looks in all packages when running tests, so you can name this directory anything you want - or even embed it within other packages. Just make sure you include an __init__.py file so that Python recognises it as a package.

mkdir test
touch test/__init__.py

Writing our first test

Now that we're setup, we can go write our first test. We'll create a test_mytest.py file in the test directory. It's important that the file name starts with test_ so that Python recognises it as a test file.

import unittest
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.chrome.service import Service

class test_mytest(unittest.TestCase):
    browser = None

    @classmethod
    def setUpClass(cls) -> None:
        # This can be any browser supported by webdriver
        cls.browser = webdriver.Chrome(service=Service(executable_path=ChromeDriverManager().install()))

    @classmethod
    def tearDownClass(cls) -> None:
        cls.browser.quit()

    # Custom this or add more tests!
    def test_Google(self):
        self.browser.get('https://google.com')
        self.assertIn('Google', self.browser.title)

if __name__ == "__main__":
    unittest.main()

You may have noticed that we've chosen to use the setUpClass and tearDownClass methods instead of the conventional setUp and tearDown.
This is because the setUpClass and tearDownClass methods are only called once per test class, whereas the setUp and tearDown methods are called for each test method.
By doing this, we save time by only starting and stopping the browser once per test class.

Running your test

All that's left to do now is run our test. To do this, simply run the following command:

python -m unittest

You can also run a specific test by passing the test file name to the command:

python -m unittest test.test_mytest

Customising your test

Unless you work at Google, you'll probably want to customise your test to do something more useful! We suggest you check out the Selenium Webdriver's getting started guide for some detailed examples of how to use Selenium Webdriver.

Setting up Puppeteer and Typescript with Jest

Lewis — Fri, 21 Feb 2025 21:08:40 +0000

In this tutorial, we'll be going over how to set up Puppeteer and Typescript with Jest. We'll be combining the jest-puppeteer preset with the ts-jest preset to get a fully working Typescript environment for our Puppeteer tests.

Installing the packages

First off, we'll need to install the required packages:

npm i -D jest jest-puppeteer puppeteer ts-jest typescript
# or if you prefer to use yarn
yarn add -D jest jest-puppeteer puppeteer ts-jest typescript

We'll also need to install the types for the various libraries we're using:

npm i -D @types/jest @types/puppeteer @types/jest-environment-puppeteer
# or if you prefer to use yarn
yarn add -D @types/jest @types/puppeteer @types/jest-environment-puppeteer

Setting up Jest

Next, we'll need to set up Jest. We'll do this by creating a jest.config.js file at the root of our project. Both ts-jest and jest-puppeteer recommend setting the preset parameter but unfortunately, Jest only accepts one preset. To work around this, we can use the spread operator to merge the two presets together:

/** @type {import('ts-jest').JestConfigWithTsJest} */
const tsPreset = require('ts-jest/jest-preset');
const puppeteerPreset = require('jest-puppeteer/jest-preset');

module.exports = {
  ...tsPreset,
  ...puppeteerPreset
};

Setting up Typescript

Now that we've got Jest set up, we can set up Typescript. We'll do this by creating a tsconfig.json file at the root of our project. We've included our version below for reference, but there's nothing special about this setup so feel free to configure your own using the tsc --init command:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Writing our first test

Now that we've got everything set up, we can go ahead and write our first test. We'll create a mytest.test.ts file in the tests directory and add the following code:

import "expect-puppeteer";
import {beforeAll, describe, it} from "@jest/globals";

describe("Google", () => {
    beforeAll(async () => {
        await page.goto("https://google.com");
    });

    it('should display "google" text on page', async () => {
        await expect(page).toMatchTextContent("google");
    });
});

You can customise this test to suit your needs. The important part is to ensure the file ends with .test.ts or .spec.ts so that Jest will pick it up. If you prefer a different naming convention, you can configure this in the jest.config.js file using the testMatch parameter.

Running our test

Now that we've got our test written, we need a way to run it. We can do this by adding a test script to our package.json file:

{
  "scripts": {
    "test": "jest"
  }
}

Now we can run our test using the following command:

npm run test
# or if you prefer to use yarn
yarn test

Go forth and test

That's it, you're now ready to go forth and test. We recommend checking out the Puppeteer and jest-puppeteer documentation for more information on how to test with Puppeteer.

Migrating from Jest to Vitest

Lewis — Mon, 17 Feb 2025 17:16:58 +0000

In this tutorial, we'll guide you through the process of migrating your test suite from Jest to Vitest. We'll cover the key differences, necessary configuration changes, and how to update your tests for compatibility with Vitest.

Why migrate to Vitest?

Jest has been a solid choice of testing framework for many years; it's popular, well-documented, and has plenty of plugins to pick from. However, as the modern Javascript stack continues to evolve, Jest's poor support for modern features such as ESM and Typescript can make for a frustrating experience.

Thankfully, a new player has emerged - Vitest. Vitest is a next-generation testing framework designed to be faster and more developer-friendly than Jest. It's built on top of Vite, which provides lightning-fast HMR (Hot Module Replacement) and native ESM & Typescript support.

Installing Vitest

First, let's install Vitest and remove Jest:

npm uninstall jest @types/jest
npm install -D vitest
# or if you prefer yarn
yarn remove jest @types/jest
yarn add -D vitest

Updating configuration

Replace your jest.config.js with a vitest.config.ts (or vitest.config.js if you're not using TypeScript):

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    // Jest-like globals
    globals: true,
    // Environment
    environment: 'jsdom',
    // Include below if you want code coverage
    coverage: {
      provider: 'v8', // or 'istanbul'
      reporter: ['text', 'json', 'html'],
    },
  },
})

Updating your tests

Most Jest tests will work in Vitest with minimal changes. Here are some key differences:

Import statements: Replace import { ... } from '@jest/globals' with import { ... } from 'vitest'.
Test file naming: Vitest supports .test.ts, .spec.ts, and .test.js file extensions by default.
Mocking: Use vi instead of jest for mocking functions. For example:

// Before (Jest)
jest.fn()
jest.spyOn()

// After (Vitest)
vi.fn()
vi.spyOn()

Timers: Replace jest.useFakeTimers() with vi.useFakeTimers().

Here's an example of updating a test:

// Before (Jest)
import { describe, it, expect } from '@jest/globals';

// After (Vitest)
import { describe, it, expect } from 'vitest';

describe('My test suite', () => {
  it('should work the same in Vitest', () => {
    expect(true).toBe(true);
  });
});

Puppeteer

Vitest has experimental support for running your tests directly in a browser so you may not need to use Puppeteer any more.
Otherwise, if you're using the popular jest-puppeteer preset, you can use our vitest port - vitest-puppeteer.

Updating your package.json

Update your test scripts in package.json:

{
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest watch",
    "test:coverage": "vitest run --coverage"
  }
}

Running your tests

Now you can run your tests using the updated scripts:

npm run test
# or
yarn test

Any missing dependencies will be installed automatically by vitest.

Troubleshooting common issues

ESM imports: If you're using CommonJS modules, you might need to update your imports to use ESM syntax.
TypeScript configuration: Ensure your tsconfig.json is compatible with Vitest. You might need to add "types": ["vitest/globals"] to your compilerOptions.
Environment-specific code: If your tests rely on Node.js-specific APIs, you might need to adjust your Vitest configuration or mock these APIs.

Conclusion

Migrating from Jest to Vitest can significantly improve your testing experience and performance. While there might be some initial work involved in the migration, the benefits in terms of speed and developer experience are often worth it.

Remember to check the official Vitest documentation for more detailed information and advanced configuration options.