Background

I had a task in near weeks that design a frontend test framework system for my job. Then, I survey more and more test framework to research it different feature and different service. So this blog is result about this survey action.

Conclusion first: Our choose the framework is Storybook and Playwright.

First, I just tell you, frontend testing is very important in DevOps workflow, cos our develop process is very fast, then our inevitable to take place some bug in production environments. If your testing was good and coverage is full, then you needn’t worry about release new version.

What is test framework for frontend

A good test framework can help you to write test case easily, and run test case quickly, and coverage test case fully. So, a good test framework is very important in your develop process. In the frontend, we have some test framework, like Jest, Cypress, Playwright, Storybook, etc. They have different feature and different service, so we need to choose a better test framework to use in our project. It is a table about the test framework comparison.

Considerations when choosing a frontend test framework:

• Test types: Consider the types of tests you need to run, such as unit, integration, end-to-end, or UI component testing.
• Framework support: Choose a test framework that supports your frontend framework, such as React, Vue, Angular, etc.
• Performance: Consider the speed of test execution, parallel testing support, and test coverage.
• Ease of use: Choose a test framework that is easy to set up, write tests, and maintain.
• Community support: Consider the size and activity of the test framework community, as well as the availability of plugins and extensions.
• Integration: Consider how well the test framework integrates with your CI/CD pipeline, version control system, and other tools.
• Cost: Consider the cost of using the test framework, including licensing fees, cloud testing services, and maintenance costs.
• Scalability: Consider how well the test framework scales with your project size, team size, and testing requirements.
• Documentation: Consider the quality and availability of documentation, tutorials, and support resources for the test framework.
• Future-proofing: Consider the long-term viability and support of the test framework, as well as its compatibility with future technologies and trends.
• User experience: Consider the user experience of writing and running tests with the test framework, as well as the quality of error messages and debugging tools.

Why we choose Storybook and Playwright?

• Storybook: Cos our had a UI component library used of it to build. So we need a test framework to test it.
• Playwright: Cos our project is a modern web app, so we need a cross-browser end-to-end testing tool to test it. Our compare result is Playwright is better than Cypress, so we choose it. Why not choose Cypress? Cos Cypress is only support Chrome browser, and our project need to support multi-browser, and Cypress has many business service in Playwright is free, so we choose Playwright.

How to you how to use it in your project.

Let’s hand by hand to tell you do it. Cos our used Storybook and Playwright in our project. So I will show you how to use it in your project.

How to use Storybook

1. Install Storybook

npx sb init

2. Start Storybook

npm run storybook

3. Write your story

import React from 'react';
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});

Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});

Secondary.args = {
  label: 'Button',
};

4. Write your test case

import React from 'react';
import { render } from '@testing-library/react';
import { Primary, Secondary } from './Button.stories';

it('renders the button in the primary state', () => {
  const { getByText } = render(<Primary {...Primary.args} />);
  expect(getByText('Button')).toHaveClass('button--primary');
});

it('renders the button in the secondary state', () => {
  const { getByText } = render(<Secondary {...Secondary.args} />);
  expect(getByText('Button')).toHaveClass('button--secondary');
});

How to use Playwright

1. Install Playwright

npm install -D playwright

2. Write your test case

const { test, expect } = require('@playwright/test');

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__title');
  await expect(title).toHaveText('Playwright');
});

3. Run your test case

npx playwright test

Conclusion

In this blog, I tell you how to choose a modern test framework for frontend in the 2024. And I tell you how to use Storybook and Playwright in your project. Hope it can help you to choose a better test framework for your project.

Links

• How to Choose a Frontend Framework | Blog
• Playwright
• Storybook: Frontend workshop for UI development
• Cypress
• Jest