تجاوز صعوبات المُساعدة الخاصة بـ Playwright

تجربة تلقائية لتطبيقات الويب تتطلب عادة تفاعلاً مع واجهات برمجة التطبيقات الخارجية (APIs). ومع ذلك، الاعتماد على ردود الـ APIs الفعلية يمكن أن يحضر متغيرات خارجة عن السيطرة، مثل قضايا الشبكة أو تعطيل الخادم. وهنا يأتي دور تحليل API. تحليل API يسمح لك بمحاكاة ردود الـ APIs، مما يجعل تجاربك أكثر قابلية للثقة وأسرع. في هذه المقالة، سنكتشف كيفية تحليل APIs باستخدام Playwright مع تايباسكرايب.

تحليل APIs في Playwright

يوفر Playwright طريقة للتعقب والتخلص من الطلبات الشبكية ومحاكاة الردود باستخدام الطريقة route. دعونا نلخص مثالاً حيث نحاكي رد API.

دليل خطوة بخطوة

1. إستيراد الوظائف الضرورية + إنشاء اختبار أساسي

TypeScript

import { test, expect, chromium } from '@playwright/test';

test('Mock User Profile API', async ({ page }) => {
    await page.goto('https://example.com/profile');
    // سيتم الحليل هنا
});

2. إعداد التعقب والتخلص من الطلبات والحليل

TypeScript

test('Mock User Profile API', async ({ page }) => {
    // المشهد 1: استرجاع البيانات بنجاح
    await page.route('https://api.example.com/user/profile', route => {
        const mockResponse = {
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({
                name: 'John Doe',
                email: '[email protected]',
                age: 30
            })
        };
        route.fulfill(mockResponse);
    });

    await page.goto('https://example.com/profile');
    
    const userName = await page.textContent('#name'); // Assuming the name is rendered in an element with id 'name'
    const userEmail = await page.textContent('#email'); // Assuming the email is rendered in an element with id 'email'
    const userAge = await page.textContent('#age'); // Assuming the age is rendered in an element with id 'age'
    
    expect(userName).toBe('John Doe');
    expect(userEmail).toBe('[email protected]');
    expect(userAge).toBe('30');
});

3. إضافة مشاهدات إضافية

TypeScript

test('Mock User Profile API - Empty Profile', async ({ page }) => {
    // المشهد 2: ملف تعريف العميل فارغ
    await page.route('https://api.example.com/user/profile', route => {
        const mockResponse = {
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({})
        };
        route.fulfill(mockResponse);
    });

    await page.goto('https://example.com/profile');
    
    const userName = await page.textContent('#name');
    const userEmail = await page.textContent('#email');
    const userAge = await page.textContent('#age');
    
    expect(userName).toBe('');
    expect(userEmail).toBe('');
    expect(userAge).toBe('');
});

test('Mock User Profile API - Server Error', async ({ page }) => {
    // المشهد 3: خطأ الخادم
    await page.route('https://api.example.com/user/profile', route => {
        const mockResponse = {
            status: 500,
            contentType: 'application/json',
            body: JSON.stringify({ error: 'Internal Server Error' })
        };
        route.fulfill(mockResponse);
    });

    await page.goto('https://example.com/profile');
    const errorMessage = await page.textContent('#error'); // Assuming the error message is rendered in an element with id 'error'
    expect(errorMessage).toBe('Internal Server Error');
});

تشغيل تجاربك

npx playwright test

تقنيات التحليل المتقدمة

يسمح لPlaywright تقنيات التحليل المتقدمة، مثل ردود تشريطية أو التأخيرات. إليك مثال على تحليل تشريطي:

TypeScript

test('Conditional Mocking', async ({ page }) => {
    await page.route('https://api.example.com/user/profile', route => {
        if (route.request().method() === 'POST') {
            route.fulfill({
                status: 201,
                contentType: 'application/json',
                body: JSON.stringify({ message: 'Profile created' })
            });
        } else {
            route.fulfill({
                status: 200,
                contentType: 'application/json',
                body: JSON.stringify({
                    name: 'John Doe',
                    email: '[email protected]',
                    age: 30
                })
            });
        }
    });

    await page.goto('https://example.com/profile');
    
    // اللوجيكا الإضافية للاختبار هنا
});

يمكنك أيضًا إدخال التأخيرات لمحاكاة التسخين الشبكي:

TypeScript

test('Mock with Delay', async ({ page }) => {
    await page.route('https://api.example.com/user/profile', async route => {
        await new Promise(res => setTimeout(res, 2000)); // Delay for 2 seconds
        route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({
                name: 'John Doe',
                email: '[email protected]',
                age: 30
            })
        });
    });

    await page.goto('https://example.com/profile');
    
    // اللوجيكا الإضافية للاختبار هنا
});

الختام

محاكاة APIs في Playwright بواسطة TypeScript هي تقنية قوية تعزز الكفاءة والسرعة في تجاربك. من خلال الاستمرار في الطلبات الشبكية وتوفير الردود المخصصة، يمكنك تحليق مختلف السناريوهات والتأكد من تصرف تطبيقك كما تتوقع تحت ظروف مختلفة.

أتمنى أن يساعدك هذا الدليل على البدء بمحاكاة API في تجارب Playwright. تجارب سعيدة!

Source:
https://dzone.com/articles/effortless-api-mocking-with-playwright