Introducing SafeTest: A Revolutionary Approach to Frontend Testing

Introducing SafeTest: A Revolutionary Approach to Frontend Testing

Testing web-based User Interface (UI) applications has long been a challenge for developers, with traditional methods often presenting trade-offs between control and functionality. Enter SafeTest, a groundbreaking library that redefines End-To-End (E2E) testing for web UI applications. In this post, we'll explore the challenges of traditional UI testing, the features of SafeTest, and how it can revolutionize your testing workflow.

The Challenges of Traditional UI Testing

Traditional UI testing methods, such as unit testing and integration testing, each have their limitations. Unit testing, exemplified by tools like react-testing-library, offers control over rendering and behavior but lacks interaction with the actual page. On the other hand, integration testing tools like Cypress and Playwright provide page control but struggle with complex application setups and lack visibility into certain UI elements.

SafeTest: A Novel Approach

SafeTest introduces a novel approach to UI testing by injecting hooks into the application's bootstrapping stage, allowing seamless integration with Playwright for browser control. This approach unlocks a host of features:

• Deep Linking: Link directly to specific tests without the need for a node test server.
• Two-way Communication: Establish communication between the browser and test contexts.
• Comprehensive Reporting: Automatically generate reports with video replays and trace viewers.

Testing with SafeTest

SafeTest's syntax is designed to be familiar to UI testers, leveraging Jest for test authoring. Here's a glimpse of how tests look with SafeTest:

import { describe, it, expect } from 'safetest/jest';
import { render } from 'safetest/react';

describe('my app', () => {
  it('loads the main page', async () => {
    const { page } = await render();
    await expect(page.getByText('Welcome to the app')).toBeVisible();
    expect(await page.screenshot()).toMatchImageSnapshot();
  });
});

Leveraging Overrides

SafeTest introduces overrides using React Context, allowing for dynamic value changes during tests. This feature enables complex test scenarios, such as mocking API responses and modifying app-level values. Here's an example of using overrides with SafeTest:

const FetchPerson = createOverride(fetchPerson);

export const People: React.FC = () => {
  const fetchPeople = FetchPerson.useValue();
  const { data: people, loading, error } = useAsync(fetchPeople);

  if (loading) return <Loader />;
  if (error) return <ErrorPage error={error} />;
  return <Table data={data} rows={[...]} />;
};

SafeTest in Corporate Environments

SafeTest is designed to accommodate corporate environments with authentication requirements. By generating and assuming test user credentials, SafeTest seamlessly integrates into complex setups without compromising security.

Beyond React

While SafeTest's examples primarily focus on React, it's not limited to a single framework. SafeTest is compatible with Vue, Svelte, Angular, and even Next.js or Gatsby. Additionally, it supports both Jest and Vitest, providing flexibility for different test runners.

Conclusion

SafeTest represents a paradigm shift in UI testing, offering a robust solution for modern web applications. Its innovative approach to testing, comprehensive feature set, and compatibility with various frameworks make it a game-changer for developers. As SafeTest gains traction within Netflix and beyond, we anticipate its widespread adoption and look forward to community feedback and contributions.

Experience the future of UI testing with SafeTest – your gateway to seamless, comprehensive, and efficient testing for web-based applications. Try it today and witness the transformation in your testing workflow.