برنامه نویسی

نمایشنامه نویس – تست های پارامترسازی – انجمن DEV 👩‍💻👨‍💻

هی مردم،

امروز وقت آن است که در مورد نحوه پارامتری کردن تست ها با Playwright صحبت کنیم.

مواردی وجود دارد که می‌خواهیم رفتار مشابهی را اما با مقادیر متفاوت آزمایش کنیم، بنابراین در این موارد، ایجاد ساختاری برای تست و استفاده مجدد از آن با پارامترهای مختلف معمول است.

ساده ترین راه برای انجام این کار با Playwright استفاده از وانیلی جاوا اسکریپت است.

شما می توانید یک آرایه با موارد مختلف و با استفاده از for بند، شما می توانید آزمون N بار با پارامترهای مختلف فراخوانی کنید.

اگر به اپلیکیشن تیک تاک بازگردیم، یک مثال واقعی می‌تواند شبیه‌سازی دورهای مختلف باشد و برای هر دور، توالی حرکت‌ها و اینکه چه کسی باید برنده باشد را نشان دهد.

اجرای این سناریو را می توان از این طریق انجام داد

import { expect, test as base } from "@playwright/test";

const test = base.extend({
  page: async ({ baseURL, page }, use) => {
    baseURL && (await page.goto(baseURL));
    await use(page);
  },
});

type TestCase = {
  winner: "X" | "O";
  moves: number[];
};

const testCases: TestCase[] = [
  {
    winner: "X",
    moves: [1, 5, 6, 7, 3, 9, 2],
  },
  {
    winner: "O",
    moves: [3, 1, 5, 7, 9, 4],
  },
];

for (const { winner, moves } of testCases) {
  test(`should win the player "${winner}" with these ${moves}`, async ({
    page,
  }) => {
    for (const move of moves) {
      await page.locator(`button:nth-child(${move})`).click();
    }

    const winnerParagraph = await page.getByText(/winner/i);
    await expect(winnerParagraph).toContainText(winner);
  });
}
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

همانطور که می توانید متوجه شوید، نتیجه بسیار ساده است:

  1. یک نوع TestCase را تعریف کنید

  2. یک آرایه با موارد ایجاد کنید

  3. موارد را تکرار کنید و الف ایجاد کنید test برای هر مورد

  4. اجرا کنید و نتیجه آزمایش را بررسی کنید

خوب، این راه حل خوب است و می تواند بسیاری از موارد ما را حل کند، اما شما می توانید با Playwright کارهای بیشتری انجام دهید!

این امکان وجود دارد که یک فایل csv را بارگیری کنید و از آن برای ترسیم تمام موارد آزمایشی استفاده کنید. نمایشنامه‌نویس این راه‌حل را به‌طور کامل آشکار نمی‌کند، اما سادگی که Playwright با آن ساخته شده است، یک راه‌حل ساده را برای انجام این کار مجاز می‌سازد.

بگذارید یک مثال به شما نشان دهم:

می توانید دو مورد قبلی را در یک فایل csv به این صورت نگاشت کنید

// e2e/csv/winners_cases.csv
"test_case","winner","moves"
"should win the player X","X","1,5,6,7,3,9,2"
"should win the player O","O","3,1,5,7,9,4"
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس با استفاده از یک بسته npm به نام csv-parse ما می توانیم csv را در تست خود به این ترتیب بارگذاری کنیم

import { parse } from "csv-parse/sync";
import fs from "fs";
import path from "path";

const cases = parse(
  fs.readFileSync(
    path.join(process.cwd(), "e2e", "csv", "winners_cases.csv")
  ),
  {
    columns: true,
    skip_empty_lines: true,
  }
);
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در حال حاضر در records متغیر، شما تمام داده هایی را دارید که موارد آزمایشی شما را توصیف می کند.

آخرین کاری که باید انجام دهید این است که تست ها را مانند مثال قبلی ایجاد کنید

 for (const testCase of cases) {
  test(testCase.test_case, async ({ page }) => {
    const moves = testCase.moves.split(",");
    for (const move of moves) {
      await page.locator(`button:nth-child(${move})`).click();
    }

    const winnerParagraph = await page.getByText(/winner/i);
    await expect(winnerParagraph).toContainText(testCase.winner);
  });
}
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

و voila، شما یک مجموعه آزمایشی دارید که تست را از یک فایل csv اجرا می کند.

به نظر من، هر دو راه خوب است، اما با فایل csv شما کنترل کمتری بر روی کد و تست های خود دارید و به راحتی می توانید با خطای مواجه شوید که به تست یا کد بستگی ندارد، بلکه به این دلیل است که شخصی فایل را تغییر داده است. راه نادرست، روش غلط. پس لطفا توجه کنید که چه کسی فایل ها را لمس می کند 😊

خوب، فکر می کنم شما ایده ای دارید که چگونه می توانید تست های خود را پارامتر کنید.

وقت خداحافظی با این سریال است، این آخرین مقاله است. اگر ویژگی‌های جدیدی برای به اشتراک گذاشتن با شما وجود داشته باشد، در آینده به شما باز خواهم گشت 😊 اما در حال حاضر، فکر می‌کنم تمام!

امیدوارم از آن لذت برده باشید و به زودی شما را ببینم!

test.afterAll(() => {

خداحافظ 👋

})؛

Nb می توانید کد این مقاله را پیدا کنید اینجا

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا