تست رابط خود را به طور موثر: الگوهای تست های IU قوی

مقاله با singebob نوشته شده است

آزمایش رابط (IU) یک چالش است : آزمایشات باید باشد قابل اعتماد ، خوانا و قابل نگهداری با گذشت زمان ، در حالی که به اندازه کافی انعطاف پذیر باقی مانده است تا تغییرات محصول را دنبال کند. متأسفانه ، IU به طور مرتب تکامل می یابد ، و این آزمایشات اغلب انجام می شود شکننده و اگر تصور آنها سختگیرانه نباشد ، توسعه آن دشوار است. ما همچنین می خواهیم تست های مداوم با سفرهای واقع گرایانه داشته باشیم.

این مقاله به بررسی می پردازد الگوهای اثبات شده برای بهبود کیفیت تست های IU. این آزمایشات همچنین فرصتی برای قرار دادن خود در کاربر برنامه های ما است.

ویژگی های کاربر

این الگوی پیشنهاد می کند از انتخاب کنندگان بر اساس ویژگی ها یا خصوصیات قابل مشاهده توسط کاربر استفاده کند (نقش های قابل دسترسی ، برچسب ها ، متون و غیره) برای شناسایی و تعامل با عناصر رابط. این امر باعث می شود که آزمایشات بصری تر و به سمت تجربه واقعی کاربر ، وابسته تر به CSS باشد ، در حالی که شیوه های توسعه را با استفاده از دسترسی در نظر می گیرد.

💡 امروز رویکردی است که توسط اکثر ابزارهای اتوماسیون مرورگر مانند نمایشنامه نویس توصیه می شود.

اگر از Cypress استفاده می کنید ، اگرچه این مستندات کتابخانه آزمایش را برانگیخته است ، اما استفاده از آن را توصیه می کند data-test-idبشر

اما ما با این توصیه موافق نیستیم: د.
در همان ایده ، استفاده از یاب دهندگان بر اساس CSS یا XPath توصیه نمی شود ، زیرا DOM اغلب می تواند تغییر کند ، که منجر به آزمایش های غیر دولتی می شود.

نمونه هایی از کد برای دسترسی به عناصر DOM یک صفحه وب

مثال استفاده با کتابخانه تست

// tests/homepage.spec.ts
import { describe, it, expect } from 'vitest';
import { screen } from '@testing-library/dom';

describe('HomePage - User Facing Attributes', () => {
  it('devrait afficher un titre contenant "Playwright" et un lien "Get started" visible', () => {
    await this.page.goto('https://playwright.dev/');

    // Sélection basée sur des attributs exposés à l'utilisateur·ice
    const header = screen.getByRole('heading', { level: 1, name: /Playwright/i });
    expect(header).toBeInTheDocument();

    const getStartedLink = screen.getByRole('link', { name: /Get started/i });
    expect(getStartedLink).toBeVisible();
  });
});

مثال استفاده با نمایشنامه نویس

// tests/homepage.spec.ts
import { test, expect, Page, Locator } from '@playwright/test';
import { PlaywrightHomePage } from '../pages/PlaywrightHomePage';

test.describe('Test du site Playwright via User Facing Attributes', () => {
  test('Vérifier que le titre principal contient "Playwright" et que le lien "Get started" est visible', async ({ page }) => {
    await this.page.goto('https://playwright.dev/');

    // Sélection basée sur des attributs exposés à l'utilisateur·ice
    const header = this.page.getByRole('heading', { level: 1 });
    const getStartedLink = this.page.getByRole('link', { name: /Get started/i });

    await expect(header).toContainText('Playwright');
    await expect(getStartedLink).toBeVisible();
  });
});

فواید

• استحکام آزمون:
  این آزمایشات در طول اصلاحات فنی کمتر شکسته می شوند (مانند تغییرات ویژگی CSS یا ترتیب چراغ در DOM).

• تراز با UX:
  انتخاب کنندگان مورد استفاده با آنچه کاربر می بیند و استفاده می کند مطابقت دارد و از این طریق ارتباط تست ها را بهبود می بخشد.

• ارتقاء شیوه های دسترسی خوب:
  همه رابط ها به ویژگی ها یا نقش های مربوطه مجهز نیستند ، بنابراین این الگوی تشویق می کند که رابط های در دسترس و ساختار یافته ایجاد شود.

• خوانایی و وضوح:
  آزمایشات صریح تر است زیرا آنها عناصر رابط را به عنوان یک شخص توصیف می کنند.

معایب

• وابستگی به محتوای متنی:
  اگر برچسب ها یا متون به طور مکرر تغییر کنند ، حتی اگر عملکرد صحیح باقی بماند ، آزمایش ها می توانند شکننده شوند.

• کنترل کمتر بر انتخاب کنندگان پیچیده:
  برای تعامل خاص خاص یا عناصر بسیار پویا (مانند یک عنصر در یک جدول یا لیستی از داده ها) ، ممکن است علاوه بر یا جایگزینی از انتخاب کننده های فنی استفاده شود.

مدل شیء

هدف اصلی آن این است که منطق آزمون را از هم جدا کنید (سناریوها و ادعاها) منطق تعامل با رابطبشر

نمونه های کد با نمایشنامه نویس

// pages/PlaywrightHomePage.ts
import { Page, Locator } from '@playwright/test';

export class PlaywrightHomePage {
  readonly page: Page;
  readonly header: Locator;

  constructor(page: Page) {
    this.page = page;

    // On cible ici le titre principal de la page (par exemple, l'élément h1)
    this.header = page.locator('h1');
  }

  // Méthode pour naviguer vers la page d'accueil
  async navigate(): Promise<void> {
    await this.page.goto('https://playwright.dev/');
  }

  // Méthode pour récupérer le texte du titre
  async getHeaderText(): Promise<string | null> {
    return this.header.textContent();
  }
}

مثال استفاده

// tests/homepage.spec.ts
import { test, expect } from '@playwright/test';
import { PlaywrightHomePage } from '../pages/PlaywrightHomePage';

test.describe('Test du site Playwright', () => {
  test('Vérifier que le titre principal contient "Playwright"', async ({ page }) => {
    // Instanciation de la page via notre Page Object
    const homePage = new PlaywrightHomePage(page);
    await homePage.navigate();

    const headerText = await homePage.getHeaderText();

    expect(headerText).toContain('Playwright');
  });
});

فواید

• جدایی مسئولیت ها:
  POM منطق آزمون را از اجرای رابط جدا می کند. این امر به تست ها اجازه می دهد تا بر اعتبار رفتار شغلی متمرکز شوند.

• مدولار بودن و مقیاس پذیری:
  هر صفحه یا مؤلفه توسط یک کلاس خاص نشان داده می شود ، بنابراین سازمان و تکامل آزمون آزمون ها را تسهیل می کند.

• تعمیر و نگهداری آسان:
  هنگامی که اصلاح شده در رابط (تغییر انتخاب کننده ، ساختار HTML اصلاح شده و غیره) انجام می شود ، کافی است کلاس مربوطه را بدون لمس خود آزمایشات به روز کنید.

• قابلیت استفاده مجدد:
  روش ها و انتخاب های محصور شده در یک شی می توانند در چندین آزمایش مورد استفاده مجدد قرار گیرند ، بنابراین باعث کاهش تکثیر کد می شوند.

• خوانایی و وضوح تست ها:
  با واگذاری تعامل به اشیاء اختصاصی ، سناریوهای آزمون مختصر و خوانا هستند. بنابراین می توانیم بدون از بین رفتن در جزئیات اجرای ، به سرعت قصد آزمایش را درک کنیم.

معایب

• خطر تکثیر آنقدر ساختار یافته:
  بدون طراحی خوب ، می توانید به جای استخراج اجزای مشترک ، به کلاس هایی که رفتارهای مشابه را برای اجزای مکرر کپی می کنند ، پایان دهید. در صورتی که همین مؤلفه چندین بار در یک صفحه پیدا شود ، فقط با مشخص کردن بلوک والدین در انتخاب کننده دسترسی پیدا کنید.

• اتصال در صورت موجود در یک کتابفروشی جداگانه:
  POM را در استراحت نگه دارید / یک کتابفروشی جداگانه باعث ایجاد مشکلات تراز انتخاب کننده هنگام به روزرسانی صفحات می شود.

الگوی فیلمنامه: جایگزین AU POM

الگوی فیلمنامه با تأکید بر اقدامات و اهداف کاربران ، به جای ساختار فنی صفحات ، رویکردی برای تست های ساختار UI است. مخصوصاً برای پیگیری تست های گسترده و مقیاس پذیر

به جای دستکاری مستقیم عناصر IU از طریق صفحه مدل شی (POM) ، “بازیگران” را معرفی می کند که با استفاده از “کارها” و “سؤالات” با رابط تعامل دارند.

نمونه های کد با نمایشنامه نویس

import { Page } from '@playwright/test';

// Définition des intéractions
export class EnterText {
  static into(selector: string, text: string) {
    return async (page: Page) => {
      await page.fill(selector, text);
    };
  }
}

export class Click {
  static on(selector: string) {
    return async (page: Page) => {
      await page.click(selector);
    };
  }
}

// Définition des tâches
export class Login {
  static withCredentials(username: string, password: string) {
    return async (page: Page) => {
      await EnterText.into('#username', username)(page);
      await EnterText.into('#password', password)(page);
      await Click.on('#login-button')(page);
    };
  }
}

// Définition des questions
export class IsLoggedIn {
  static async answeredBy(page: Page) {
    return await page.locator('#welcome-message').isVisible();
  }
}

مثال استفاده

// tests/login.spec.ts
import { test, expect } from '@playwright/test';
import { Login, IsLoggedIn } from './login-screenplay';

test('Alice peut se connecter', async ({ page }) => {
  await page.goto('https://example.com/login');

  // L'utilisateur·ice joue le rôle d'un·e acteur·ice réalisant une tâche
  await Login.withCredentials('alice', 'securepassword')(page);

  // Vérification de la connexion
  const loggedIn = await IsLoggedIn.answeredBy(page);
  expect(loggedIn).toBe(true);
});

فواید

• مدولار:
  تعامل و کارها قابل استفاده مجدد است.

• خوانایی:
  کد بیشتر شبیه یک سناریوی کاربر است.

• تعمیر و نگهداری آسان:
  اصلاح اجرای تعامل ، بقیه آزمایشات را خراب نمی کند.

• مقیاس پذیری:
  افزودن کارهای جدید را بدون کپی کردن کد تسهیل می کند.

معایب

• پیچیدگی اولیه:
  پرونده ها و انتزاع بیشتر از یک صفحه مدل شیء ساده است که گاهی اوقات برای تست های ساده کوچک کافی است.

• منحنی یادگیری:
  نیاز به درک جدایی بین بازیگران ، وظایف و تعامل دارد.

ابزارها و کتابخانه های محبوب برای تست های IU

کتابخانه تست

کتابخانه تست یک راه حل نوری برای آزمایش IUS با تعامل با DOM به طور مشابه با یک شخص است. رویکرد وی مبتنی بر تحقیق و تعامل با عناصر از طریق آنهاست ویژگی های کاربر.

نمایشنامه نویس

نمایشنامه نویس یک ابزار اتوماسیون مرورگر است که برای ارائه یک توسعه راحت و قدرتمند طراحی شده است. این پشتیبانی از چندین زبان (Typecript ، JavaScript ، Python ، C#، Java) پشتیبانی می کند و به شما امکان می دهد برنامه های مربوط به مرورگرهای مختلف (کروم ، فایرفاکس ، WebKit) و سیستم عامل ها (ویندوز ، لینوکس ، MACOS) را آزمایش کنید.
API او دستکاری DOM را تسهیل می کند و به طور بومی گنجانیده شده است ویژگی های کاربر برای تعامل با عناصر. نمایشنامه نویس همچنین با ویژگی های پیشرفته خود مانند Record & Replay ، تست ها به صورت موازی و اشکال زدایی تعاملی با ابزارهای بصری مانند ردیابی بیننده متمایز است.