npm

@uuv/playwright
TypeScript icon, indicating that this package has built-in type declarations

3.19.0 • Public • Published

@uuv/playwright

UUV Logo

Test as final user

A solution to facilitate the writing and execution of E2E tests understandable by any human being(English or French) using cucumber(BDD) and cypress or playwright.

npm playwright testing-library cucumber

What is @uuv/playwright?

The @uuv library (User centric Usecases Validator) is an ecosystem that simplifies the writing of End to End tests in a BDD approach and a user-centric way.
We can use the playwright engine(@uuv/playwright) to run test or cypress with @uuv/cypress

Benefits

  • If used correctly, integrates accessibility from the development stage
  • A living documentation is possible because we propose an unified language for developers and non-developers with a rich dictionary of ready-to-use sentences
  • @uuv/assistant that facilitates the writing of tests by suggesting the most accessible sentences
  • JetBrains Plugin that helps you to write and execute your UUV E2E tests from JetBrains IDEs
  • Integrates several runtime engines: Cypress / Playwright
  • User friendly and standardized execution report([example](https://e2e-test-quest.github.io/kata-e2e-uuv/

    Comparison

Criteria Cypress Playwright Testing library UUV
User centrism ✔️ ✔️ ✔️
Native accessibility ✔️ ✔️ ✔️
Easy setup configuration for BDD test ⚠️ ⚠️ ✔️
Understandable by everyone
(included non dev)
✔️

Syntax example

With this dom example :

<body>
<h1>Result<h1>
</body>

we see that the sentence proposed by UUV is the most understandable of all

Library Syntax
Cypress cy.get('h1').contains('Result')
Playwright await expect(page.getByTitle('Result')).toHaveCount(1)
Testing library expect(screen.getByTitle(/Result/i)).toBeTruthy()
UUV Then I should see a title named "Result"

Documentation

documentation

Installation

npm install --save-dev @uuv/playwright

or

yarn add -D @uuv/playwright

Configuration (optional)

documentation for configure uuv playwright

Usage

Scenarios example

You can find test examples here : weather-app.feature

Write test

To write your first test, create the file uuv/e2e/first-test.feature in the project root with the following content :

Feature: Hello World

Scenario: Search - Successful case
  When I visit path "/"
  Then I should see an element with role "heading" and name "My app title"

For more details, please go to the documentation:

documentation for write test

Run test

browser mode

npx uuv open

or

yarn uuv open

headless mode

Use for continuous integration(CI example) or headless execution.

without args
npx uuv e2e

or

yarn uuv e2e
with args
npx uuv e2e --browser=edge --env="{'TAGS':'@mobile'}" --generateHtmlReport --targetTestFile=./uuv/e2e/first-test.feature

or

yarn uuv e2e --browser=edge --env="{'TAGS':'@mobile'}" --generateHtmlReport --targetTestFile=./uuv/e2e/first-test.feature

For more details, please go to the documentation:

documentation for run test

License


MIT license

This project is licensed under the terms of the MIT license.

Authors

Package Sidebar

Install

npm i @uuv/playwright

Weekly Downloads

723

Version

3.19.0

License

MIT

Unpacked Size

2.04 MB

Total Files

546

Last publish

Collaborators

  • 2setech
  • fr.dice