ACT 1: EXPOSITION

It's here! At last, the invincible PLAYWRIGHT-SCHEMA-VALIDATOR has arrived to impose the "Schema Peace" on any rebellious API that dares exist on this side of the Rubicon.

And it’s here wielding two powerful weapons: the classic AJV gladius and the newly forged, sharp ZOD trident.

But don’t be deceived, citizen! The PLAYWRIGHT-SCHEMA-VALIDATOR remains fully backward compatible with its venerable predecessor, the PLAYWRIGHT-AJV-SCHEMA-VALIDATOR, and allies seamlessly with the PW-API-PLUGIN to deliver an even more glorious display of schema violations, worthy of the Playwright Senate itself!

Let us behold how this almighty triumvirate can make your API testing as effortless and triumphant as a Roman victory parade.

ACT 2: CONFRONTATION

Sorry, my QA friend, I just couldn't resist! I am captivated by the Roman era, both the early Republic and the later Empire, so I had to theme this blog around that glorious epoch when so many boundaries were shattered.

And that is precisely what the PLAYWRIGHT-SCHEMA-VALIDATOR plugin sets out to do: shatter any wall that dares stand between you and flawless API validation.

New Features Available

With this new plugin, you will benefit from new features such as:

• Full support for the AJV validator (for plain JSON schemas, Swagger documents, and OpenAPI schemas) as well as the ZOD validator (for Zod schemas).

• Consistent display of schema validation errors, regardless of whether you use AJV or ZOD.

• Ability to configure custom styles to present schema violations according to your team’s preferences (including icons and HEX colors).

• Complete backward compatibility and support for all existing features found in its predecessor, playwright-ajv-schema-validator.

Complete List of Features

But if you want to know the full list of features included in the playwright-schema-validator plugin, here they are:

✔️ Function validateSchema() (and alias validateSchemaAjv()) performs a JSON Schema Validation and reports errors in the responses of network requests.

• ⭐ Schemas are provided as JSON objects.

• ⭐ Supports Plain JSON schemas, OpenAPI 3.x schema documents and Swagger 2.0 schema documents.

• ⭐ Utilizes the core-ajv-schema-validator, leveraging the Ajv JSON Schema Validator.

✔️ Fuction cy.validateSchemaZod() identifies and reports Zod schema validation errors in the responses of network requests.

• ⭐ Schemas are provided as Zod objects.

• ⭐ Uses the core-zod-schema-validator, leveraging the Zod Schema Validator.

✔️ The functions process the responses provided by Playwright API requests.

✔️ Provides a user-friendly view of schema errors and mismatches between the validated data and the JSON schema, clearly highlighting where each validation error occurred and the exact reason for the mismatch:

• ⭐ Total number of schema errors.

• ⭐ Full list of schema errors as provided by Ajv or Zod depending on the selected function.

• ⭐ A nested tree view of the validated data, clearly indicating the errors and where they occurred in an easy-to-understand format.

✔️ Allow custom styles (icons and text colors) to match the user's preferences for distinguishing schema errors.

✔️ Presents results to the user in a consistent format, regardless of whether the AJV Schema Validator or ZOD Validator is used.

✔️ Environment variables:

• ⭐ DISABLE_SCHEMA_VALIDATION to disable schema validation in your tests even when function validateSchema() is present.

• ⭐ LOG_API_UI to enable the display of API call details in Playwright UI and Trace Viewer .

• ⭐ LOG_API_REPORT to enable the display of API call details in HTML Report .

• ⭐ Integrates seamlessly with the pw-api-plugin but also works independently with standard Playwright API requests.

  

How to Migrate

To upgrade your Playwright framework from PLAYWRIGHT-AJV-SCHEMA-VALIDATOR to the new PLAYWRIGHT-SCHEMA-VALIDATOR, you only need to:

1) Uninstall the previous plugin:

npm uninstall playwright-ajv-schema-validator

2) Install the new plugin:

npm install -D playwright-schema-validator

3) Replace previous imports in your project:

Replace:

import { validateSchema } from 'playwright-ajv-schema-validator';

With:

import { validateSchema } from 'playwright-schema-validator';

No major refactoring required, just update your imports!

• You can continue using the validateSchema() function with AJV schemas as before.

• For AJV validation, you now also have the option to use the new validateSchemaAjv() alias.

• For ZOD schema validation, the plugin provides the new validateSchemaZod() function.

Some Examples

Example 1: validateSchemaAjv() using Playwright standard API requests and overriding issuesStyles

    test('Should validate schema AJV of POST "/store/order" for Playwright standard API and custom Styles override', async ({ request, page }) => {
        const issuesStyles = {
            iconPropertyError: '🟦', colorPropertyError: '#5178eb',
            iconPropertyMissing: '🟪', colorPropertyMissing: '#800080'
        }

        const requestBody = {
            "id": 0,
            "petId": 0,
            "quantity": 0,
            "shipDate": "2024-01-01T00:57:29.231Z",
            "status": "placed",
            "complete": false
        }

        const responsePost = await request.post(`https://petstore.swagger.io/v2/store/order`,
            {
                data: requestBody,
                headers: { 'Content-type': 'application/json; charset=UTF-8'},
            }
        );

        expect(responsePost.status()).toBe(200)
        const responseBodyPost = await responsePost.json()

        await validateSchemaAjv(
            { page },
            responseBodyPost,
            petStoreSwaggerErrors,
            { endpoint: '/store/order', method: 'post', status: 200 },
            issuesStyles
        );
    });

Example 2: validateSchemaAjv() using pw-api-plugin with pwApi class

    test('Should validate schema of POST "/store/order" for pw-api-plugin and pwApi', async ({ request, page }) => {
        const requestBody = {
            "id": 0,
            "petId": 0,
            "quantity": 0,
            "shipDate": "2024-01-01T00:57:29.231Z",
            "status": "placed",
            "complete": false
        }

        const responsePost = await pwApi.post({ request, page }, `https://petstore.swagger.io/v2/store/order`,
            {
                data: requestBody,
                headers: {
                    'Content-type': 'application/json; charset=UTF-8',
                },
            }
        );

        expect(responsePost.status()).toBe(200)
        const responseBodyPost = await responsePost.json()

        await validateSchemaAjv(
            { page },
            responseBodyPost,
            petStoreSwaggerErrors,
            { endpoint: '/store/order', method: 'post', status: 200 }
        );
    });

Example 3: validateSchemaZod() using pw-api-plugin with axiosApi class

    test('Should validate schema ZOD of GET "/pet/findByStatusr" for pw-api-plugin and axiosApi and overriding `issuesStyles', async ({ request, page }) => {
        const responseGet = await axiosApi.get({ page }, `https://petstore.swagger.io/v2/pet/findByStatus?status=pending`,
            {
                findByStatusReq: { 'Content-Type': 'application/json' }
            }
        )

        expect(findByStatusReq.status()).toBe(200);
        const responseFindByStatus = await findByStatusReq.json();

        await validateSchemaZod(
            { page },
            responseBodyGet,
            petStoreSwaggerErrors
        );
    })

PLAYWRIGHT-SCHEMA-VALIDATOR: Just One Marvel in the Joyful Empire of the Wicked Schema Validators

If you want to perform schema validations not only in Playwright projects but also in any other Node projects, or even in Cypress, I have you covered!

Over time, I have created the Wicked Schema Validators ecosystem.

With this, you have all the weapons you need to conquer any API testing battlefield!

ACT3: RESOLUTION

Migrating to PLAYWRIGHT-SCHEMA-VALIDATOR is so effortless that, if you’re doing API testing in your Playwright framework, there’s really no excuse not to take advantage of this powerful plugin. 😅

Simply cross the Rubicon, and the empire of seamless API testing will be yours:

• GitHub: https://github.com/sclavijosuero/playwright-schema-validator
• npm: https://www.npmjs.com/package/playwright-schema-validator

I'd love to hear from you! Please don't forget to follow me, leave a comment, or a reaction if you found this article useful or insightful. ❤️ 🦄 🤯 🙌 🔥

You can also connect with me on my new YouTube channel: https://www.youtube.com/@SebastianClavijoSuero

If you'd like to support my work, consider buying me a coffee or contributing to a training session, so I can keep learning and sharing cool stuff with all of you.
Thank you for your support!