अंत-to-puppeteerSharp के साथ परीक्षण समाप्त करना | - | Selenium का एक उचित विकल्प (हिन्दी (Hindi))

अंत-to-puppeteerSharp के साथ परीक्षण समाप्त करना | - | Selenium का एक उचित विकल्प

Thursday, 27 November 2025

//

43 minute read

Comments Raw Edit
E2E Testing PuppeteerSharp Testing xUnit

आधुनिक ई | 2 | E |( | End & #44; - | To _ - |End & #39; , | उपयोगकर्ताओं की तरह अपने साइट का उपयोग करते हुए प्रयोग करने के लिए परीक्षण नहीं करता है | ' | यह दर्दनाक नहीं होता |. | इस व्यापक मार्गदर्शक से आपको पता चलता है कि कैसे तेजी से PuppeteerSharp का उपयोग किया जा सकता है \ , | विश्वसनीय ब्राउज़र स्वचालन में | МSK9 | नेट | एमSK10 | मूल परीक्षण से लेकर पीडीएफ उत्पादन और वेब स्क्रैपिंग तक हर चीज़ को ढूंढने के लिए प्लेराइट गाइड बजाय.

परिचय

अगर आप के साथ कभी काम किया है सेलेनियम समाप्ति के लिए-- से- तक-अंतिम परीक्षण के लिए, आप जानते हैं कि यह पीछली ओर सही दर्द हो सकता है। . ड्राइवर संस्करणों के साथ लड़ने के बीच, आपके मशीन पर काम करते हुए, लेकिन कहीं भी अन्य स्थान पर छिद्रित परीक्षणों का काम करने के साथ, और वेबड्राइवर प्रोटोकॉल की सामान्य धीमीता।

दाखिल करें पुppeteerSharpName Google का -net पोर्ट पुतलीकार लाइब्रेरी

इस लेख में मैं आपको यह बता दूँगा कि मैंने ई के लिए पुppeteerSharp का कार्यान्वयन कैसे किया है।

क्या है पुतलीकारSharp फिर

पुppeteerSharpName Chrome या क्रोमियम ब्राउज़रों को नियंत्रित करने के लिए एक उच्च -स्तरीय API प्रदान करता है क्रोम डेवटूल्स प्रोटोकॉल. विपरीत सेलेनियम, जो का उपयोग करता है वेबड्राइवर प्रोटोकॉल (एक बहुत clunky HTTP-\आधारित JSON तार प्रोटोकॉल),\puppeteerSharp DevTools के माध्यम से सीधे ब्राउज़र में बात करता है

इस तरह सोचें

  • सेलेनियम: अपने ब्राउज़र के साथ संचार करने के लिए डाक द्वारा पत्र भेजने की तरह
  • पुppeteerSharpNameब्राउज़र के लिए सीधा टेलीफोन लाइन रखने की तरह
graph LR
    A[Test Code] -->|WebDriver Protocol| B[Selenium]
    B -->|JSON Wire Protocol| C[Browser Driver]
    C -->|Commands| D[Browser]

    E[Test Code] -->|DevTools Protocol| F[PuppeteerSharp]
    F -->|Direct Connection| G[Chrome/Chromium]

    style A stroke:#333,stroke-width:2px
    style E stroke:#333,stroke-width:2px
    style F stroke:#0066cc,stroke-width:3px
    style G stroke:#0066cc,stroke-width:3px

जहाँ E2E परीक्षण आपके परीक्षण रणनीति में फिट है

हम गहराई में डुबोने से पहले-,\ let\ '\ lets talk about where E\ 2\ e testing fits in the grand scheme of things\ .\ You\ msc4\ have probably heard of the test pyramid \ m sc5\ here\ mSc6\ how it actually works in practice\ mSC7\

graph TB
    subgraph "Testing Pyramid"
        E2E[E2E Tests<br/>Few, Slow, High Confidence<br/>Test full user journeys]
        INT[Integration Tests<br/>Medium number, Medium speed<br/>Test component interactions]
        UNIT[Unit Tests<br/>Many, Fast, Low Cost<br/>Test individual functions]
    end

    subgraph "Trade-offs"
        SPEED[Speed]
        CONF[Confidence]
        COST[Cost]
    end

    subgraph "When to Use E2E"
        W1[Critical user journeys<br/>e.g. checkout, login]
        W2[Cross-browser compatibility]
        W3[JavaScript-heavy UIs]
        W4[Complex user interactions]
    end

    E2E -.->|Slow but high confidence| CONF
    INT -.->|Balanced| SPEED
    UNIT -.->|Fast and cheap| SPEED

    E2E -.->|Expensive to run| COST
    UNIT -.->|Cheap to run| COST

    style E2E stroke:#cc0000,stroke-width:3px
    style INT stroke:#ff9900,stroke-width:2px
    style UNIT stroke:#00aa00,stroke-width:2px
    style CONF stroke:#0066cc,stroke-width:2px
    style SPEED stroke:#00aa00,stroke-width:2px
    style COST stroke:#cc0000,stroke-width:2px

वास्तविकता जाँच

  • इकाई परीक्षण आप के परीक्षणों में से (80%।
  • इंटीग्रेशन परीक्षण अपने परीक्षणों में (15% ): जांचें कि कैसे विभिन्न भाग एक साथ काम करते हैं।
  • E2E परीक्षण आपके परीक्षणों में से (5% ): धीमी

जब आप की जरूरत है E2E परीक्षण

  1. महत्वपूर्ण उपयोगकर्ता यात्राएँ लॉगिन
  2. जावास्क्रिप्ट-भारी यूआई आधुनिक SPAप्रतिक्रिया, वीयू, कोणीय) जहां यूआई रेंडर किया जाता है क्लाइंट
  3. क्रॉस-ब्राउजर मुद्दे - भिन्न ब्राउज़रों ने चीजें अलग-अलग रूप से प्रस्तुत करती हैं जब भी पुतलीकारSharp के साथ आप को Chrome है
  4. जटिल संक्रियाएँ - मल्टी--स्टेप विजार्ड्स

जब आप DON'T E की आवश्यकता है

  1. सरल क्रूड ऑपरेशन एकीकरण परीक्षण पर्याप्त हैं
  2. शुद्ध तर्क एमएसके0 यह है कि एमएसक1 के लिए इकाई परीक्षण क्या हैं
  3. हर किनारा केस - E2E परीक्षण बहुत धीमी और व्यापक परीक्षण के लिए महंगा है

Selenium के ऊपर क्यों पुppeteerSharp

मुझे रास्ता गिनने दो

  1. कोई ड्राइवर प्रबंधन फेफ नहीं: PuppeteerSharp आपके लिए Chrome ब्राउज़र को डाउनलोड करता है और प्रबंधित करता है. ChromeDriver संस्करणों के बारे में अब कोई मसखरापन नहीं है जो आपके संस्थापित Chrome संस्करण से मेल नहीं खाते

  2. तीव्र निष्पादनDevTools प्रोटोकॉल वेब ड्राइवर से काफी तेज है

  3. बेहतर APIAPI अधिक आधुनिक और अंतर्ज्ञानी है

  4. बनाया गया स्क्रीनशॉट में - पीडीएफ जननजब एक परीक्षण असफल होता है तो एक स्क्रीनशॉट चाहते हैं

  5. नेटवर्क अनुरोध अवरोधित करेंआप आसानी से नेटवर्क अनुरोधों को अवरोधित कर सकते हैं

  6. उचित जावास्क्रिप्ट निष्पादनपृष्ठ संदर्भ में जावास्क्रिप्ट निष्पादित करें और परिणाम ऐसे तरीके से वापस प्राप्त करें जो आपको रोना नहीं देता

पुतलीकार आकार सेटअप कर रहा है

पहले, जोड़ें पुppeteerSharpName पैकेज

dotnet add package PuppeteerSharp

यहाँ मेरी टेस्ट परियोजना कॉन्फ़िगरेशन हैMostlylucid.Test/Mostlylucid.Test.csproj:23):

<PackageReference Include="PuppeteerSharp" Version="20.2.4" />
<PackageReference Include="xunit" Version="2.9.3" />
<PackageReference Include="xunit.runner.visualstudio" Version="3.1.4">
  <PrivateAssets>all</PrivateAssets>
  <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>

I'm उपयोग कर रहा हूँ एक्सयूनिट (ASPM SK1NET Core's defaultMSC3 लेकिन PuppeteerSharp के साथ समान रूप से अच्छा काम करता है यूनिट या एमएसटीस्ट.

एक आधार परीक्षण वर्ग बनाना

सेटअप को दोहराने के बजाय प्रत्येक परीक्षण में teardown कोडMostlylucid.Test/E2E/E2ETestBase.cs:12जो ब्राउज़र जीवन चक्र प्रबंधन को नियंत्रित करता है

वर्ग संरचना

using PuppeteerSharp;
using Xunit.Abstractions;

namespace Mostlylucid.Test.E2E;

public abstract class E2ETestBase : IAsyncLifetime
{
    protected readonly ITestOutputHelper Output;
    protected IBrowser Browser = null!;
    protected IPage Page = null!;

    protected const string BaseUrl = "http://localhost:8080";
    protected const int DefaultTimeout = 30000;

    protected E2ETestBase(ITestOutputHelper output)
    {
        Output = output;
    }

हम लागू करते हैं IAsyncLifetime से xUnit, जो एकsync सेटअप प्रदान करता है

ब्राउज़र प्रारंभीकरण

    public async Task InitializeAsync()
    {
        // Download Chromium on first run
        var browserFetcher = new BrowserFetcher();
        await browserFetcher.DownloadAsync();

        // Launch browser with sensible defaults
        Browser = await Puppeteer.LaunchAsync(new LaunchOptions
        {
            Headless = true, // Set false for debugging
            DefaultViewport = new ViewPortOptions
            {
                Width = 1400,
                Height = 900
            },
            Args = new[]
            {
                "--no-sandbox",
                "--disable-setuid-sandbox"
            }
        });

        Page = await Browser.NewPageAsync();
        Page.DefaultTimeout = DefaultTimeout;
    }

BrowserFetcher स्वचालित रूप से एक संगत क्रोमियम संस्करण को पहली बार चलाने पर डाउनलोड करता है --no-sandbox Docker के लिए फ्लैग जरूरी हैं

साफ करना

    public async Task DisposeAsync()
    {
        if (Page != null) await Page.CloseAsync();
        if (Browser != null) await Browser.CloseAsync();
    }
}

मेमोरी लीक से बचने के लिए उचित निपटान महत्वपूर्ण है

सहायक विधि

आधार वर्ग में बॉयलप्लेट को कम करने के लिए सहायक विधियां शामिल हैं (Mostlylucid.Test/E2E/E2ETestBase.cs:72-172):

// Navigation with automatic network idle waiting
protected async Task NavigateAsync(string path)
{
    var url = path.StartsWith("http") ? path : $"{BaseUrl}{path}";
    await Page.GoToAsync(url, new NavigationOptions
    {
        WaitUntil = new[] { WaitUntilNavigation.Networkidle2 }
    });
}

// Safe element waiting with timeout handling
protected async Task<IElementHandle?> WaitForSelectorAsync(string selector, int timeout = 5000)
{
    try
    {
        return await Page.WaitForSelectorAsync(selector, new WaitForSelectorOptions
        {
            Timeout = timeout,
            Visible = true
        });
    }
    catch (WaitTaskTimeoutException)
    {
        return null; // Graceful degradation
    }
}

// Common element operations
protected async Task<bool> ElementExistsAsync(string selector) =>
    await Page.QuerySelectorAsync(selector) != null;

protected async Task<string?> GetTextContentAsync(string selector)
{
    var element = await Page.QuerySelectorAsync(selector);
    return element == null ? null :
        await Page.EvaluateFunctionAsync<string>("el => el.textContent", element);
}

protected async Task TypeAsync(string selector, string text, int delay = 50)
{
    await Page.WaitForSelectorAsync(selector);
    await Page.TypeAsync(selector, text, new TypeOptions { Delay = delay });
}

protected async Task ClickAsync(string selector)
{
    await Page.WaitForSelectorAsync(selector);
    await Page.ClickAsync(selector);
}

ये कंटायर बिटों को संभालते हैं - अवयवों के अस्तित्व की प्रतीक्षा करता है | , | सुरेख समय समाप्ति प्रबंधन |, | और CI में परीक्षण असफल होने पर स्वचालित लॉगिंग

वास्तविक परीक्षण लिख रहा है

सही-,-जाओ-'-अच्छी चीज़ों तक पहुंचने के लिए। --आर्थिक परीक्षणों को लिखना।Mostlylucid.Test/E2E/FilterBarTests.cs:20-50):

[Fact(Skip = "Local E2E test - requires site to be running on localhost:8080")]
public async Task FilterBar_LanguageDropdown_ShowsLanguages()
{
    // Arrange
    await NavigateAsync("/blog");

    // Act - Click the language dropdown button
    var dropdownButton = await WaitForSelectorAsync("#LanguageDropDown button");
    Assert.NotNull(dropdownButton);

    await ClickAsync("#LanguageDropDown button");
    await WaitAsync(300);

    // Assert - Dropdown menu should be visible with language options
    var dropdownOpen = await EvaluateFunctionAsync<bool>(@"() => {
        const dropdown = document.querySelector('#LanguageDropDown div[x-show]');
        if (!dropdown) return false;
        const style = window.getComputedStyle(dropdown);
        return style.display !== 'none';
    }");

    Assert.True(dropdownOpen, "Language dropdown should be open");

    // Check that English option exists
    var hasEnglish = await EvaluateFunctionAsync<bool>(@"() => {
        const options = document.querySelectorAll('#LanguageDropDown li a');
        return Array.from(options).some(opt => opt.textContent.toLowerCase().includes('english'));
    }");

    Assert.True(hasEnglish, "Language dropdown should contain English option");
    Output.WriteLine("✅ Language dropdown shows languages correctly");
}

यह परीक्षण जांच कर रहा है कि मेरी भाषा ड्रॉप डाउन ठीक से काम करता है

विशेषता छोड़ें

[Fact(Skip = "Local E2E test - requires site to be running on localhost:8080")]

मैं इस परीक्षण को डिफ़ॉल्ट रूप से छोड़ दिया है क्योंकि यह साइट को स्थानीय रूप से चलाने की आवश्यकता है।

जावास्क्रिप्ट चला रहा है

var dropdownOpen = await EvaluateFunctionAsync<bool>(@"() => {
    const dropdown = document.querySelector('#LanguageDropDown div[x-show]');
    if (!dropdown) return false;
    const style = window.getComputedStyle(dropdown);
    return style.display !== 'none';
}");

यह एक क्षेत्र है जहां पुतली शार्प बिल्कुल चमकता है EvaluateFunctionAsync विधि आपको ब्राउज़र संदर्भ में जावास्क्रिप्ट चलाने देता है और एक उचित प्रकार के रूप में परिणाम को वापस प्राप्त करता है .NET प्रकार

इस को सेनेनियम के साथ तुलना करें जहाँ आप

  1. तत्व ढूंढें
  2. इसके प्रदर्शन गुण प्राप्त करें
  3. स्ट्रिंग परिणाम का विश्लेषण करें
  4. उम्मीद है कि यह-' यह जाँच करने के समय तक stale नहीं है

एचटीएमएस अंतरक्रियाओं का परीक्षण कर रहा है

मेरा ब्लॉग उपयोग करता है HTMX व्यापक रूप से (सर्वर-जावास्क्रिप्ट लिखने के बिना किनारा रेंडरिंगMostlylucid.Test/E2E/FilterBarTests.cs:98-126):

[Fact(Skip = "Local E2E test - requires site to be running on localhost:8080")]
public async Task FilterBar_SortOrder_ChangesPostOrder()
{
    // Arrange
    await NavigateAsync("/blog");

    // Get the first post title before sorting
    var firstPostBefore = await EvaluateFunctionAsync<string>(@"() => {
        const postLink = document.querySelector('.post-title, article h2 a, #contentcontainer article a');
        return postLink?.textContent?.trim() || '';
    }");
    Output.WriteLine($"First post before sort: {firstPostBefore}");

    // Act - Change sort order to "Oldest first"
    await Page.SelectAsync("#orderSelect", "date_asc");
    await WaitAsync(1000); // Wait for HTMX to update

    // Assert - Post order should have changed
    var firstPostAfter = await EvaluateFunctionAsync<string>(@"() => {
        const postLink = document.querySelector('.post-title, article h2 a, #contentcontainer article a');
        return postLink?.textContent?.trim() || '';
    }");
    Output.WriteLine($"First post after sort: {firstPostAfter}");

    var selectValue = await EvaluateFunctionAsync<string>("() => document.querySelector('#orderSelect')?.value");
    Assert.Equal("date_asc", selectValue);
    Output.WriteLine("✅ Sort order selection works correctly");
}

यहाँ कुंजी है await WaitAsync(1000) चयनित मान को बदलने के बाद. HTMX को अपने अनुरोध करने और DOM को अद्यतन करने के लिए एक क्षण की आवश्यकता होती है।

प्रतिक्रियात्मक डिजाइन का परीक्षण

यहाँ एक बेवकूफ परीक्षण है जो मेरी फिल्टर पट्टी को सही तरह से मोबाइल उपकरणों पर छुपा हुआ है जाँच करता हैMostlylucid.Test/E2E/FilterBarTests.cs:216-245):

[Fact(Skip = "Local E2E test - requires site to be running on localhost:8080")]
public async Task FilterBar_ResponsiveDesign_HiddenOnMobile()
{
    // Arrange - Set mobile viewport
    await Page.SetViewportAsync(new ViewPortOptions
    {
        Width = 375,
        Height = 667
    });

    await NavigateAsync("/blog");
    await WaitAsync(500);

    // Assert - Filter bar should be hidden on mobile
    var filterBarVisible = await EvaluateFunctionAsync<bool>(@"() => {
        const filterBar = document.querySelector('.hidden.lg\\:flex');
        if (!filterBar) return true;
        const rect = filterBar.getBoundingClientRect();
        return rect.width > 0 && rect.height > 0;
    }");

    Assert.False(filterBarVisible, "Filter bar should be hidden on mobile viewport");
    Output.WriteLine("✅ Filter bar correctly hidden on mobile");

    // Reset viewport
    await Page.SetViewportAsync(new ViewPortOptions
    {
        Width = 1400,
        Height = 900
    });
}

आप दृश्यपोर्ट को किसी भी समय बदल सकते हैं

उन्नत पुppeteerSharp विशेषताएँ

नेटवर्क अवरोधन

मेरी पसंदीदा विशेषताओं में से एक नेटवर्क अनुरोधों को अवरोधित और परिवर्धित करने की क्षमता है

await Page.SetRequestInterceptionAsync(true);

Page.Request += async (sender, e) =>
{
    // Block all image requests to speed up tests
    if (e.Request.ResourceType == ResourceType.Image)
    {
        await e.Request.AbortAsync();
    }
    // Mock API responses
    else if (e.Request.Url.Contains("/api/posts"))
    {
        await e.Request.RespondAsync(new ResponseData
        {
            Status = HttpStatusCode.OK,
            ContentType = "application/json",
            Body = "{\"posts\": []}"
        });
    }
    else
    {
        await e.Request.ContinueAsync();
    }
};

स्क्रीनशॉट लें

एक स्क्रीनशॉट एक हजार लॉग संदेशों का मूल्य है

try
{
    // Your test code here
    await Page.ClickAsync("#someButton");
}
catch (Exception)
{
    // Take a screenshot on failure
    await Page.ScreenshotAsync("test-failure.png");
    throw; // Re-throw to fail the test
}

पीडीएफ जनन

आप पृष्ठों के पीडीएफ भी उत्पन्न कर सकते हैं।

await Page.PdfAsync("page.pdf", new PdfOptions
{
    Format = PaperFormat.A4,
    PrintBackground = true
});

कोड कवरेज

पुppeteerSharp जावास्क्रिप्ट कोड कवरेज डेटा भी एकत्र कर सकता है

await Page.Coverage.StartJSCoverageAsync();
await Page.GoToAsync("http://localhost:8080");

var coverage = await Page.Coverage.StopJSCoverageAsync();
var totalBytes = coverage.Sum(c => c.Text.Length);
var usedBytes = coverage.Sum(c => c.Ranges.Sum(r => r.End - r.Start));
var percentUsed = usedBytes / (double)totalBytes * 100;

Output.WriteLine($"JavaScript coverage: {percentUsed:F2}%");

पुppeteerSharp vs The Competition

चलो ''' को सही तरीके से देखना चाहिए कि कैसे PuppeteerSharp अन्य E के साथ stacks up है

graph TD
    A[E2E Testing Tools] --> B[Selenium WebDriver]
    A --> C[PuppeteerSharp]
    A --> D[Playwright]
    A --> E[Cypress]

    B --> B1[❌ Slow WebDriver protocol]
    B --> B2[❌ Driver management hassle]
    B --> B3[✅ Multi-browser support]
    B --> B4[✅ Mature ecosystem]

    C --> C1[✅ Fast DevTools protocol]
    C --> C2[✅ Auto browser management]
    C --> C3[❌ Chrome/Chromium only]
    C --> C4[✅ Great .NET integration]

    D --> D1[✅ Fast DevTools protocol]
    D --> D2[✅ Auto browser management]
    D --> D3[✅ Multi-browser support]
    D --> D4[⚠️ Newer to .NET ecosystem]

    E --> E1[✅ Great developer experience]
    E --> E2[❌ JavaScript only]
    E --> E3[❌ Not for .NET]
    E --> E4[✅ Excellent documentation]

    style C stroke:#0066cc,stroke-width:3px
    style C1 stroke:#00aa00,stroke-width:2px
    style C2 stroke:#00aa00,stroke-width:2px
    style C4 stroke:#00aa00,stroke-width:2px

Selenium WebDriverComment

द ओल्ड गार्ड

सेलेनियम 2004 के बाद से मौजूद है और यह दिखाता है कि . यह रौशन होता है | ' | 3 | अच्छी तरह से & #44; - | दस्तावेज़ित |, | और सूर्य के नीचे हर ब्राउज़र को समर्थित करता है

Pros:

  • सभी ब्राउज़रों को समर्थित करता है
  • उपकरणों और विस्तारों की विशाल पारिस्थितिकी
  • अच्छी तरह से ज्ञात और व्यापक रूप से अपनाया गया
  • cross-ब्राउजर परीक्षण के लिए अच्छा

कन्स

  • वेबड्राइवर प्रोटोकॉल धीमी है
  • ड्राइवर प्रबंधन एक पीड़ा है ( हालांकि वेबड्राइवर मैनेजर मदद करता है
  • आधुनिक वैकल्पिकों की तुलना में एपीआई पुराने महसूस करता है
  • फ्लैकी परीक्षण समय की समस्याओं के कारण आम हैं
  • कोई बनाया गया - नेटवर्क अवरोधन नहीं

इसे कब प्रयोग करना है जब आप को निश्चित रूप से कई ब्राउज़रों के बीच परीक्षण करने की जरूरत है

प्लेराइट

द न्यू किड ऑन द ब्लॉक

प्लेराइट के साथ पुतली के लिए माइक्रोसॉफ्ट' का जवाब है .NET समर्थन आरंभ से बेक इन

Pros:

  • Chrome को समर्थित करता है
  • पुppeteer के समान आधुनिक API
  • स्वचालित ब्राउज़र डाउनलोड करता है
  • बनाया गया-संजाल अवरोधन में, स्क्रीनशॉट
  • उत्कृष्ट .NET समर्थन

कन्स

  • नया, इतना छोटा पारिस्थितिकी
  • यदि आपको केवल Chrome की जरूरत है तो अधिजीवित हो सकता है
  • बहु-- ब्राउज़र समर्थन के कारण थोड़ा अधिक जटिल सेटअप

इसे कब प्रयोग करना है जब आप को बहु-ब्रुज़र समर्थन की जरूरत है लेकिन एक आधुनिक API चाहते हैं

साइप्रस

जावास्क्रिप्ट विकासकर्ता

Cypress शानदार है यदि आप JavaScript में काम कर रहे हैं।

Pros:

  • शानदार विकासकर्ता अनुभव
  • समय-travel त्रुटिमोचन
  • स्वचालित प्रतीक्षा
  • महान दस्तावेज़ीकरण

कन्स

  • केवल JavaScript/TypeScript
  • कोई .NET समर्थन नहीं
  • बहुविध टैब या विंडो का परीक्षण नहीं कर सकता
  • अपने अनुप्रयोग का परीक्षण करने के लिए सीमित (दोनों डोमेनों में कोई परीक्षण नहीं करता है

इसे कब प्रयोग करना है @item: inlistbox

तो क्या आप उपयोग करना चाहिए

यहाँ मैं ले रहा हूँ

graph TD
    A[What E2E tool?] --> B{Need multi-browser testing?}
    B -->|Yes| C{Starting new project?}
    B -->|No| D[PuppeteerSharp]

    C -->|Yes| E[Playwright]
    C -->|No| F{Invested in Selenium?}

    F -->|Yes| G[Stick with Selenium]
    F -->|No| E

    D --> H[✅ Fast, simple, reliable]
    E --> I[✅ Modern, flexible]
    G --> J[⚠️ Consider migrating]

    style D stroke:#0066cc,stroke-width:3px
    style H stroke:#00aa00,stroke-width:2px

अधिकांश .NET विकासकर्ताओं के लिए आधुनिक वेब अनुप्रयोगों का निर्माण

  • सिर्फ परीक्षण → पुppeteerSharp
  • बहु-ब्रुज़र परीक्षण → नाटककार
  • Selenium का उपयोग कर रहा है Playwright में स्थानांतरित करने पर विचार करें

CI/CD में चलाने वाले परीक्षण

E2E परीक्षण आपके स्थानीय मशीन पर सभी अच्छी और अच्छे हैं, लेकिन वे CI में चलाने की जरूरत है। GitHub क्रियाएँ:

name: E2E Tests

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  e2e-tests:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3

    - name: Setup .NET
      uses: actions/setup-dotnet@v3
      with:
        dotnet-version: '9.0.x'

    - name: Install dependencies
      run: dotnet restore

    - name: Build
      run: dotnet build --no-restore

    - name: Start application
      run: |
        dotnet run --project Mostlylucid/Mostlylucid.csproj &
        echo $! > app.pid

    - name: Wait for application to start
      run: |
        timeout 60 bash -c 'until curl -f http://localhost:8080/health; do sleep 2; done'

    - name: Run E2E tests
      run: |
        dotnet test Mostlylucid.Test/Mostlylucid.Test.csproj \
          --filter "Category=E2E" \
          --logger "console;verbosity=detailed"

    - name: Upload screenshots on failure
      if: failure()
      uses: actions/upload-artifact@v3
      with:
        name: test-screenshots
        path: '**/test-failure-*.png'

    - name: Stop application
      if: always()
      run: |
        kill $(cat app.pid) || true

कुंजी बिट्स

  1. पृष्ठभूमि में अनुप्रयोग प्रारंभ करें
  2. यह स्वस्थ होने के लिए प्रतीक्षा करें
  3. परीक्षण चलाएँ
  4. यदि कोई परीक्षण असफल हो तो स्क्रीनशॉट अपलोड करें
  5. हमेशा अनुप्रयोग को रोकें, यदि परीक्षण असफल होते हैं

सामान्य पथभ्रष्टताएं और उनसे कैसे बचें

फ्लैकी परीक्षण

E2E परीक्षण चिपचिपा हो सकता है - वे कभी-कभी पास करते हैं और दूसरों को असफल करते हैं

बड

await Page.ClickAsync("#button");
var text = await GetTextContentAsync("#result");
Assert.Equal("Success", text);

अच्छा

await Page.ClickAsync("#button");
await Page.WaitForSelectorAsync("#result");
var text = await GetTextContentAsync("#result");
Assert.Equal("Success", text);

हमेशा उस तत्व के लिए प्रतीक्षा करें जिसके साथ आप संपर्क करने के बारे में हैं और दृश्यमान हो जाना है

ठ̧ें

प्रत्येक परीक्षण पूरी तरह से स्वतंत्र होना चाहिए

बड

[Fact]
public async Task Test1_Login()
{
    await LoginAsync("user", "password");
    // User is now logged in for subsequent tests
}

[Fact]
public async Task Test2_ViewDashboard()
{
    // Assumes user is still logged in from Test1
    await NavigateAsync("/dashboard");
}

अच्छा

[Fact]
public async Task Test1_Login()
{
    await LoginAsync("user", "password");
    await LogoutAsync(); // Clean up
}

[Fact]
public async Task Test2_ViewDashboard()
{
    await LoginAsync("user", "password"); // Set up needed state
    await NavigateAsync("/dashboard");
    await LogoutAsync(); // Clean up
}

पृष्ठ वस्तु पैटर्न

जटिल पृष्ठों के लिए

public class BlogPageObject
{
    private readonly IPage _page;

    public BlogPageObject(IPage page)
    {
        _page = page;
    }

    public async Task SelectLanguageAsync(string language)
    {
        await _page.ClickAsync("#LanguageDropDown button");
        await _page.WaitAsync(300);
        await _page.ClickAsync($"#LanguageDropDown a:has-text('{language}')");
    }

    public async Task<string[]> GetPostTitlesAsync()
    {
        return await _page.EvaluateFunctionAsync<string[]>(@"() => {
            return Array.from(document.querySelectorAll('.post-title'))
                        .map(el => el.textContent.trim());
        }");
    }
}

// Usage in tests
[Fact]
public async Task Can_Filter_By_Language()
{
    var blogPage = new BlogPageObject(Page);
    await NavigateAsync("/blog");

    await blogPage.SelectLanguageAsync("Spanish");
    var titles = await blogPage.GetPostTitlesAsync();

    Assert.All(titles, title => Assert.NotEmpty(title));
}

निष्पादन विचार

E2E परीक्षण इकाई परीक्षण से धीमी होते हैं।

समांतर में परीक्षण चलाएँ

डिफ़ॉल्ट द्वारा xUnit समांतर परीक्षण चलाता है, लेकिन आप साझा स्थिति के बारे में सावधान होना चाहिए

[Collection("E2E Tests")] // Tests in same collection run sequentially
public class FilterBarTests : E2ETestBase
{
    // Tests here share resources
}

[Collection("Blog Tests")] // Different collection runs in parallel
public class BlogTests : E2ETestBase
{
    // Tests here run in parallel with FilterBarTests
}

अनावश्यक विशेषताओं को अक्षम करें

आप नहीं कर रहे विशेषताओं को निष्क्रिय करके परीक्षण त्वरित करें

Browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
    Headless = true,
    Args = new[]
    {
        "--no-sandbox",
        "--disable-setuid-sandbox",
        "--disable-dev-shm-usage", // Overcome limited resource problems
        "--disable-accelerated-2d-canvas",
        "--disable-gpu", // Not needed for headless
        "--disable-images", // Don't load images if you don't need them
        "--disable-javascript", // Only if testing static content
    }
});

नेटवर्क अंतर्ग्रहण विवेकपूर्ण ढंग से प्रयोग करें

वस्तुओं को त्वरित करने के लिए अनावश्यक संसाधनों को रोकें

await Page.SetRequestInterceptionAsync(true);
Page.Request += async (sender, e) =>
{
    var blockedResourceTypes = new[]
    {
        ResourceType.Image,
        ResourceType.Media,
        ResourceType.Font,
        ResourceType.StyleSheet // If you don't need to test styling
    };

    if (blockedResourceTypes.Contains(e.Request.ResourceType))
    {
        await e.Request.AbortAsync();
    }
    else
    {
        await e.Request.ContinueAsync();
    }
};

डिबगिंग E2E परीक्षण

जब परीक्षण असफल होते हैं (और वे करेंगे), आप उन्हें डिबग करने की जरूरत है

Non-Headless मोड में चलाएँ

सेट करें (S) Headless = false ब्राउज़र को क्रिया में देखने के लिए

Browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
    Headless = false,
    SlowMo = 100, // Slow down by 100ms to see what's happening
});

DevTools का उपयोग करें

आप वास्तव में DevTools प्रोग्रामात्मक रूप से खोल सकते हैं

Browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
    Headless = false,
    Devtools = true, // Auto-open DevTools
});

कंसोल लॉगिंग

ब्राउज़र से कंसोल संदेश पकड़ें

Page.Console += (sender, e) =>
{
    Output.WriteLine($"Browser console: {e.Message.Text}");
};

लॉगिंग की मांग करें

सभी नेटवर्क अनुरोध लॉग करें:

Page.Request += (sender, e) =>
{
    Output.WriteLine($"Request: {e.Request.Method} {e.Request.Url}");
};

Page.Response += (sender, e) =>
{
    Output.WriteLine($"Response: {e.Response.Status} {e.Response.Url}");
};

Real-विश्व परीक्षण पैटर्न

यहाँ कुछ नमूने मैं अपने E में नियमित रूप से प्रयोग करता हूँ

परीक्षण फार्म प्रस्तुतियां

[Fact]
public async Task Can_Submit_Comment()
{
    await NavigateAsync("/blog/some-post");

    // Fill in the comment form
    await TypeAsync("#comment-name", "Test User");
    await TypeAsync("#comment-email", "[email protected]");
    await TypeAsync("#comment-content", "This is a test comment");

    // Submit the form
    await ClickAsync("#comment-submit");

    // Wait for success message
    await WaitForSelectorAsync(".comment-success");

    // Verify the comment appears
    var commentText = await GetTextContentAsync(".comment-list .comment:last-child .comment-content");
    Assert.Contains("test comment", commentText.ToLower());
}

कुंजीपटल अंतःक्रियाओं का परीक्षण

[Fact]
public async Task Can_Navigate_With_Keyboard()
{
    await NavigateAsync("/blog");

    // Focus the search box
    await Page.FocusAsync("#search");

    // Type a search query
    await Page.Keyboard.TypeAsync("testing");

    // Press arrow down to select first result
    await Page.Keyboard.PressAsync("ArrowDown");

    // Press enter to navigate
    await Page.Keyboard.PressAsync("Enter");

    // Verify we navigated to the right page
    await WaitAsync(1000);
    Assert.Contains("/blog/", Page.Url);
}

फ़ाइल अपलोड का परीक्षण कर रहा है

[Fact]
public async Task Can_Upload_Image()
{
    await NavigateAsync("/admin/upload");

    // Create a test file
    var testFilePath = Path.Combine(Path.GetTempPath(), "test-image.jpg");
    File.WriteAllBytes(testFilePath, new byte[] { 0xFF, 0xD8, 0xFF }); // JPEG header

    // Upload the file
    var fileInput = await Page.QuerySelectorAsync("input[type=file]");
    await fileInput.UploadFileAsync(testFilePath);

    await ClickAsync("#upload-submit");

    // Verify upload succeeded
    await WaitForSelectorAsync(".upload-success");

    // Clean up
    File.Delete(testFilePath);
}

ड्रैग और ड्रॉप का परीक्षण कर रहा है

[Fact]
public async Task Can_Reorder_Items()
{
    await NavigateAsync("/admin/posts");

    var dragSource = await Page.QuerySelectorAsync(".post-item[data-id='1']");
    var dropTarget = await Page.QuerySelectorAsync(".post-item[data-id='3']");

    var sourceBox = await dragSource.BoundingBoxAsync();
    var targetBox = await dropTarget.BoundingBoxAsync();

    // Perform drag and drop
    await Page.Mouse.MoveAsync(sourceBox.X + sourceBox.Width / 2, sourceBox.Y + sourceBox.Height / 2);
    await Page.Mouse.DownAsync();
    await Page.Mouse.MoveAsync(targetBox.X + targetBox.Width / 2, targetBox.Y + targetBox.Height / 2);
    await Page.Mouse.UpAsync();

    await WaitAsync(500);

    // Verify new order
    var firstItemId = await Page.EvaluateFunctionAsync<string>(
        "() => document.querySelector('.post-item').dataset.id"
    );
    Assert.Equal("1", firstItemId);
}

ASP.NET कोर परीक्षण के साथ एकीकरण

आप PuppeteerSharp के साथ एकीकृत कर सकते हैं ASP.NET Core's WebApplicationFactory अधिक एकीकृत परीक्षण अनुभव के लिए

public class E2EWebApplicationFactory : WebApplicationFactory<Program>
{
    protected override void ConfigureWebHost(IWebHostBuilder builder)
    {
        builder.UseUrls("http://localhost:5050");

        builder.ConfigureServices(services =>
        {
            // Override services for testing
            // For example, use in-memory database
            services.RemoveAll<DbContextOptions<MostlylucidDbContext>>();
            services.AddDbContext<MostlylucidDbContext>(options =>
            {
                options.UseInMemoryDatabase("TestDb");
            });
        });
    }
}

public abstract class IntegratedE2ETestBase : E2ETestBase, IClassFixture<E2EWebApplicationFactory>
{
    protected E2EWebApplicationFactory Factory { get; }

    protected IntegratedE2ETestBase(E2EWebApplicationFactory factory, ITestOutputHelper output)
        : base(output)
    {
        Factory = factory;
    }

    public override async Task InitializeAsync()
    {
        await base.InitializeAsync();

        // Application is automatically started by WebApplicationFactory
        // Override BaseUrl to use the factory's address
        BaseUrl = "http://localhost:5050";
    }
}

PDF बनाने और स्वचालन के लिए परीक्षण - पुतलीकारSharp से परे

जबकि E2E परीक्षण शानदार है, पुतलीकारSharp एक स्विस सेना की चाकू है जो बहुत अधिक कर सकता है।

पीडीएफ बनाने - वायदा और दर्द

यह विचार सरल है: Chrome में एक वेब पृष्ठ रेन्डर करें और इसे PDF के रूप में सहेजें।

यही मूल दृष्टिकोण है

public class PdfGeneratorService
{
    public async Task<byte[]> GeneratePdfFromUrlAsync(string url)
    {
        await using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
        {
            Headless = true,
            Args = new[] { "--no-sandbox", "--disable-setuid-sandbox" }
        });

        await using var page = await browser.NewPageAsync();
        await page.GoToAsync(url, new NavigationOptions
        {
            WaitUntil = new[] { WaitUntilNavigation.Networkidle0 }
        });

        var pdfData = await page.PdfDataAsync(new PdfOptions
        {
            Format = PaperFormat.A4,
            PrintBackground = true,
            MarginOptions = new MarginOptions
            {
                Top = "20mm",
                Right = "20mm",
                Bottom = "20mm",
                Left = "20mm"
            }
        });

        return pdfData;
    }
}

बहुत आसान लग रहा है।

पीडीएफ सृजन Gotchas - जो कोई आपको नहीं बताता

1. फ़ॉन्ट एम्बेडिंग नाइटमेयर्स

समस्या आपके सुंदर मनपसंद फ़ॉन्ट पीडीएफ में नहीं दिखाई देते

यह क्यों होता है पीडीएफ बनाने के दौरान Chrome को फ़ॉन्ट फ़ाइलों तक पहुंच की जरूरत है. यदि आपके फॉन्ट बाहरी सीडीएन के माध्यम से लोड किए जाते हैं और Chrome उन्हें प्राप्त नहीं कर सकता

समाधान

await page.GoToAsync(url, new NavigationOptions
{
    WaitUntil = new[]
    {
        WaitUntilNavigation.Networkidle0,  // Wait for network to be idle
        WaitUntilNavigation.Load           // Wait for fonts to load
    },
    Timeout = 60000  // Give it time to load fonts
});

// Extra insurance - wait for fonts to actually load
await page.EvaluateFunctionAsync(@"async () => {
    await document.fonts.ready;
}");

var pdfData = await page.PdfDataAsync(new PdfOptions
{
    Format = PaperFormat.A4,
    PrintBackground = true  // CRUCIAL for @font-face fonts
});

इससे भी बेहतर, अपने फ़ॉन्टों को स्थानीय रूप से होस्ट करें या उन्हें आधार के रूप में एम्बेड करें।

2. सीएसएस प्रिंट मीडिया क्वेरी

समस्या आपका पीडीएफ आपके वेब पृष्ठ की तरह कुछ भी नहीं दिखता क्योंकि Chrome प्रिंट मीडिया क्वेरी लागू करता है

यह वास्तव में है सही व्यवहार पीडीएफ प्रिंट मीडिया हैं

समाधान

उपयोग करें @media print सीएसएस नियम उचित रूप से

/* Show on screen, hide in PDF */
.no-print {
    display: block;
}

@media print {
    .no-print {
        display: none !important;
    }

    /* Prevent page breaks inside elements */
    .keep-together {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Force page breaks */
    .page-break {
        page-break-before: always;
    }
}

या यदि आप अपने पीडीएफ में स्क्रीन संस्करण चाहते हैं तो

await page.EmulateMediaTypeAsync(MediaType.Screen);  // Force screen media
var pdfData = await page.PdfDataAsync();

Page Breaks - Your Existence Ban

समस्या आपके विषयवस्तु को पृष्ठों के बीच असुविधाजनक रूप से विभाजित किया जाता है

वास्तविकता आप Chrome के खिलाफ लड़ रहे हैं

आप क्या कर सकते हैं

@media print {
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        break-after: avoid;
    }

    table, figure, img {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Force specific breaks */
    .new-page {
        page-break-before: always;
    }
}

और अपने पुppeteerSharp कोड में

var pdfData = await page.PdfDataAsync(new PdfOptions
{
    Format = PaperFormat.A4,
    PrintBackground = true,
    PreferCSSPageSize = true,  // Respect CSS @page rules
    DisplayHeaderFooter = false
});

प्रो tip: जटिल सजावट के लिए कभी-कभी यह है कि यह ब्राउज़र से लड़ने की बजाय स्पष्ट पृष्ठ ब्रेक के साथ अपने एचटीएमएल को बनाना आसान है

<div class="page">
    <!-- First page content -->
</div>
<div class="page-break"></div>
<div class="page">
    <!-- Second page content -->
</div>

4. हेडर और फुटर

आप हेडर और फुटर जोड़ सकते हैं

var pdfData = await page.PdfDataAsync(new PdfOptions
{
    Format = PaperFormat.A4,
    DisplayHeaderFooter = true,
    HeaderTemplate = @"
        <div style='font-size: 10px; text-align: center; width: 100%;'>
            <span class='title'></span>
        </div>
    ",
    FooterTemplate = @"
        <div style='font-size: 10px; text-align: center; width: 100%;'>
            Page <span class='pageNumber'></span> of <span class='totalPages'></span>
        </div>
    ",
    MarginOptions = new MarginOptions
    {
        Top = "30mm",     // Must be larger to accommodate header
        Bottom = "25mm"   // Must be larger to accommodate footer
    }
});

गोचस

  • हेडर/footer टेम्प्लेट वैध HTML होना चाहिए लेकिन बहुत सीमित हैं - कोई बाहरी सीएसएस नहीं
  • आप सिर्फ विशिष्ट चर प्राप्त कर सकते हैं date, title, url, pageNumber, totalPages
  • शैली सिर्फ इनलाइन है
  • सीमाएं शीर्षकों को समायोजित करने के लिए काफी बड़ी होनी चाहिए

5. पृष्ठभूमि आलेखी

डिफ़ॉल्ट से, Chrome नहीं print background images or colors (this is a browser default for saving ink होना चाहिए सक्षम करें

var pdfData = await page.PdfDataAsync(new PdfOptions
{
    PrintBackground = true  // Without this, your beautiful backgrounds vanish
});

6. बड़े दस्तावेजों के साथ स्मृति लीक

समस्या बहुत सी पीडीएफ बनाने से आपके अनुप्रयोग के स्मृति को गेंद में छोड़ दिया जाता है और अंततः क्रैश हो जाता है

क्यों प्रत्येक ब्राउज़र इंस्टैंस महत्वपूर्ण स्मृति का उपयोग करता है

समाधान

हमेशा इस्तेमाल करें await using या उचित निपटान

// Good - automatic disposal
await using var browser = await Puppeteer.LaunchAsync(options);
await using var page = await browser.NewPageAsync();

// Or manually
IBrowser? browser = null;
try
{
    browser = await Puppeteer.LaunchAsync(options);
    // ... use browser
}
finally
{
    if (browser != null)
    {
        await browser.CloseAsync();
        await browser.DisposeAsync();
    }
}

उच्च के लिए-volume पीडीएफ जनन , ब्राउज़र इंस्टैंस्स का पुनः उपयोग करने पर विचार करें

public class PdfGeneratorService : IDisposable
{
    private IBrowser? _browser;
    private readonly SemaphoreSlim _semaphore = new(1, 1);

    public async Task<byte[]> GeneratePdfAsync(string url)
    {
        await _semaphore.WaitAsync();
        try
        {
            // Reuse browser instance
            _browser ??= await Puppeteer.LaunchAsync(new LaunchOptions
            {
                Headless = true
            });

            await using var page = await _browser.NewPageAsync();
            await page.GoToAsync(url);
            return await page.PdfDataAsync();
        }
        finally
        {
            _semaphore.Release();
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_browser != null)
        {
            await _browser.CloseAsync();
            await _browser.DisposeAsync();
        }
        _semaphore.Dispose();
    }

    public void Dispose()
    {
        DisposeAsync().AsTask().Wait();
    }
}

मापन विकल्प - छोटा पाठ

कभी-कभी आपको एक पृष्ठ पर अधिक सामग्री को मिलाने की आवश्यकता होती है

var pdfData = await page.PdfDataAsync(new PdfOptions
{
    Format = PaperFormat.A4,
    Scale = 0.8m,  // 80% scale - fits more content
    PrintBackground = true
});

लेकिन सावधान हो जाओ - बहुत छोटा है और यह

वास्तविक-विश्व पीडीएफ जनन पैटर्न

यहाँ है कैसे मैं वास्तव में उत्पादन में पीडीएफ उत्पादन करता हूँ

public class InvoicePdfGenerator
{
    private readonly ILogger<InvoicePdfGenerator> _logger;

    public InvoicePdfGenerator(ILogger<InvoicePdfGenerator> logger)
    {
        _logger = logger;
    }

    public async Task<byte[]> GenerateInvoicePdfAsync(Invoice invoice)
    {
        await using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
        {
            Headless = true,
            Args = new[]
            {
                "--no-sandbox",
                "--disable-setuid-sandbox",
                "--disable-dev-shm-usage"  // Overcome limited resource problems
            }
        });

        await using var page = await browser.NewPageAsync();

        // Set up console logging to debug issues
        page.Console += (_, e) =>
        {
            _logger.LogInformation("Browser console: {Message}", e.Message.Text);
        };

        try
        {
            // Generate HTML content (using Razor, or however you do it)
            var htmlContent = await GenerateInvoiceHtmlAsync(invoice);

            // Set content directly rather than navigating to URL
            await page.SetContentAsync(htmlContent, new NavigationOptions
            {
                WaitUntil = new[] { WaitUntilNavigation.Networkidle0 }
            });

            // Wait for fonts to load
            await page.EvaluateFunctionAsync("() => document.fonts.ready");

            // Force screen media type to avoid print media queries changing layout
            await page.EmulateMediaTypeAsync(MediaType.Screen);

            // Generate PDF
            var pdfData = await page.PdfDataAsync(new PdfOptions
            {
                Format = PaperFormat.A4,
                PrintBackground = true,
                MarginOptions = new MarginOptions
                {
                    Top = "10mm",
                    Right = "10mm",
                    Bottom = "10mm",
                    Left = "10mm"
                },
                PreferCSSPageSize = false
            });

            _logger.LogInformation("Generated PDF for invoice {InvoiceId}, size: {Size} bytes",
                invoice.Id, pdfData.Length);

            return pdfData;
        }
        catch (Exception ex)
        {
            _logger.LogError(ex, "Failed to generate PDF for invoice {InvoiceId}", invoice.Id);

            // Take a screenshot for debugging
            try
            {
                var screenshot = await page.ScreenshotDataAsync();
                _logger.LogWarning("Captured screenshot of failed PDF generation: {Size} bytes",
                    screenshot.Length);
                // Could save this to blob storage for debugging
            }
            catch
            {
                // Swallow screenshot errors
            }

            throw;
        }
    }

    private async Task<string> GenerateInvoiceHtmlAsync(Invoice invoice)
    {
        // Your HTML generation logic here
        // Could use Razor views, or any templating engine
        return $@"
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

        body {{
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 20px;
            color: #333;
        }}

        @media print {{
            .page-break {{
                page-break-before: always;
            }}

            .no-break {{
                page-break-inside: avoid;
            }}
        }}
    </style>
</head>
<body>
    <div class='no-break'>
        <h1>Invoice #{invoice.Number}</h1>
        <p>Date: {invoice.Date:yyyy-MM-dd}</p>
    </div>

    <!-- Invoice content -->
</body>
</html>";
    }
}

लैंडस्केप व पोर्ट्रेट

सरल लेकिन प्रायः आवश्यक

var pdfData = await page.PdfDataAsync(new PdfOptions
{
    Format = PaperFormat.A4,
    Landscape = true,  // Horizontal orientation
    PrintBackground = true
});

मनपसंद पृष्ठ आकार

मानक प्रारूपों तक सीमित नहीं है

var pdfData = await page.PdfDataAsync(new PdfOptions
{
    Width = "210mm",   // Custom width
    Height = "297mm",  // Custom height (this is A4, but you can use any size)
    PrintBackground = true
});

पुppeteerSharp के लिए अन्य व्यावहारिक उपयोग

परीक्षण और पीडीएफ उत्पादन के अलावा, पुppeteerSharp कई अन्य स्वचालन कार्यों में श्रेष्ठता प्राप्त करता है

डेटा निष्कर्षण के लिए वेब स्कैपिंग

पुppeteerSharp जावास्क्रिप्ट को स्क्रैप करने के लिए शानदार है-भारी साइटें जहां पारंपरिक एचटीएमएल पार्सर कम होते हैं

public class ProductScraper
{
    public async Task<List<Product>> ScrapeProductsAsync(string url)
    {
        await using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
        {
            Headless = true
        });

        await using var page = await browser.NewPageAsync();
        await page.GoToAsync(url, new NavigationOptions
        {
            WaitUntil = new[] { WaitUntilNavigation.Networkidle2 }
        });

        // Wait for products to render (adjust selector as needed)
        await page.WaitForSelectorAsync(".product-item");

        // Extract product data using JavaScript
        var products = await page.EvaluateFunctionAsync<List<Product>>(@"() => {
            return Array.from(document.querySelectorAll('.product-item')).map(item => ({
                name: item.querySelector('.product-name')?.textContent?.trim(),
                price: parseFloat(item.querySelector('.product-price')?.textContent?.replace('£', '')),
                imageUrl: item.querySelector('img')?.src,
                inStock: !item.querySelector('.out-of-stock')
            }));
        }");

        return products;
    }
}

इसे कब प्रयोग करना है

  • एकल Scraping अनुप्रयोग -page
  • अनन्त स्क्रॉल या लचीले लोडिंग के साथ साइटें
  • जब आप पृष्ठ के साथ बातचीत करने की जरूरत है (कच बटनों को क्लिक करें, फ़ॉर्म भरें
  • लॉगइन दीवारों के पीछे की सामग्री

जब इसे उपयोग नहीं किया जाना है

स्वचालित स्क्रीनशॉट निर्माण

परीक्षण के अलावा screenshots थम्बनेल के लिए उपयोगी हैं

public class ScreenshotService
{
    public async Task<byte[]> CaptureWebsiteAsync(string url, int width = 1920, int height = 1080)
    {
        await using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
        {
            Headless = true
        });

        await using var page = await browser.NewPageAsync();
        await page.SetViewportAsync(new ViewPortOptions
        {
            Width = width,
            Height = height
        });

        await page.GoToAsync(url, new NavigationOptions
        {
            WaitUntil = new[] { WaitUntilNavigation.Networkidle2 }
        });

        // Full page screenshot
        return await page.ScreenshotDataAsync(new ScreenshotOptions
        {
            FullPage = true,
            Type = ScreenshotType.Png
        });
    }

    public async Task<byte[]> CaptureElementAsync(string url, string selector)
    {
        await using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
        {
            Headless = true
        });

        await using var page = await browser.NewPageAsync();
        await page.GoToAsync(url);

        var element = await page.WaitForSelectorAsync(selector);
        if (element == null)
        {
            throw new InvalidOperationException($"Element {selector} not found");
        }

        // Screenshot of specific element
        return await element.ScreenshotDataAsync();
    }
}

व्यवहारिक उपयोग

  • ब्लॉग पोस्टों के लिए og:छवि टैग उत्पन्न करना
  • वेबसाइट दीर्घाओं के लिए थम्बनेल बनाना
  • अनुपालन के लिए वेब पृष्ठों को अभिलेखित करना
  • लिंक साझा करने के लिए पूर्वावलोकन छवि उत्पन्न करना

निष्पादन मॉनिटरिंग

पृष्ठ लोड निष्पादन मापें:

public class PerformanceMonitor
{
    public async Task<PerformanceMetrics> MeasurePagePerformanceAsync(string url)
    {
        await using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
        {
            Headless = true
        });

        await using var page = await browser.NewPageAsync();

        var stopwatch = Stopwatch.StartNew();
        await page.GoToAsync(url, new NavigationOptions
        {
            WaitUntil = new[] { WaitUntilNavigation.Networkidle2 }
        });
        stopwatch.Stop();

        // Get performance metrics from the browser
        var metrics = await page.MetricsAsync();

        // Get performance timing data
        var performanceTiming = await page.EvaluateExpressionAsync<PerformanceTiming>(@"
            JSON.parse(JSON.stringify(performance.timing))
        ");

        return new PerformanceMetrics
        {
            TotalLoadTime = stopwatch.ElapsedMilliseconds,
            DomContentLoaded = performanceTiming.DomContentLoadedEventEnd - performanceTiming.NavigationStart,
            FirstPaint = metrics["FirstPaint"],
            LayoutCount = (int)metrics["LayoutCount"],
            ScriptDuration = metrics["ScriptDuration"]
        };
    }
}

स्वचालित रिपोर्ट निर्माण

स्वचालित रिपोर्टिंग के लिए एचटीएमएल टेम्पलेटिंग और पीडीएफ जनन को संयोजित करें

public class MonthlyReportGenerator
{
    public async Task<byte[]> GenerateMonthlyReportAsync(ReportData data)
    {
        await using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
        {
            Headless = true
        });

        await using var page = await browser.NewPageAsync();

        // Generate HTML report using your preferred templating engine
        var html = GenerateReportHtml(data);
        await page.SetContentAsync(html);

        // Wait for any charts to render (if using Chart.js, D3.js, etc.)
        await Task.Delay(2000);

        return await page.PdfDataAsync(new PdfOptions
        {
            Format = PaperFormat.A4,
            PrintBackground = true,
            DisplayHeaderFooter = true,
            HeaderTemplate = $@"
                <div style='font-size: 9px; margin: 0 auto; text-align: center;'>
                    Monthly Report - {data.Month:MMMM yyyy}
                </div>
            ",
            FooterTemplate = @"
                <div style='font-size: 9px; margin: 0 auto; text-align: center;'>
                    Page <span class='pageNumber'></span> of <span class='totalPages'></span>
                </div>
            ",
            MarginOptions = new MarginOptions
            {
                Top = "25mm",
                Bottom = "20mm",
                Left = "15mm",
                Right = "15mm"
            }
        });
    }
}

पीडीएफ बनाने की लागत

अब यहाँ पीडीएफ बनाने के लिए पुppeteerSharp का उपयोग करने के बारे में बात है संसाधनों की दृष्टि से मुक्त नहीं.

प्रत्येक ब्राउज़र इंस्टैंस

  • RAM का 100-200MB उपयोग करता है
  • रेंडरिंग के लिए महत्वपूर्ण सीपीयू की आवश्यकता है
  • PDF बनाने में 2-5 सेकंड लगते हैं

इस को समर्पित पीडीएफ लाइब्रेरी जैसे: के साथ तुलना करें

  • आईटेक्स (आधी में iTextSharp | ) | МSK2 | वाणिज्यिक लाइसेंस की आवश्यकता होती है | एमएसके3 | वर्ष |एमएसके4 | लेकिन लघु स्मृति पैटप्रिंट के साथ मिलीसेकंड में पीडीएफ उत्पन्न करता है
  • क्वेस्ट पीडीएफ MIT लाइसेंस के तहत मुक्त और ओपन सोर्स
  • PdfSharpCore मुक्त MIT लाइसेंस , लेकिन क्षमताओं में अधिक सीमित

पीडीएफ के लिए पुppeteerSharp का प्रयोग कब करें

  • आप पहले से ही एचटीएमएल टेम्प्लेट है और नहीं ' पीडीएफ सजावट कोड में फिर से लिखना चाहते हैं
  • आप पिक्सेल- जटिल वेब सजावटों के पूर्ण रेंडरिंग की जरूरत है
  • वॉल्यूम कम है।
  • आपको बाहरी वेबसाइटों से पीडीएफ उत्पन्न करने की जरूरत है जिसे आप नियंत्रण नहीं कर सकते

समर्पित पीडीएफ लाइब्रेरी का उपयोग कब करें

  • उच्च वॉल्यूम उत्पादन प्रति घंटा पीडीएफ
  • सरल सजावट
  • संसाधन-सीमित परिवेश
  • आपको उन्नत पीडीएफ सुविधाओं की आवश्यकता है

एक हाइब्रिड दृष्टिकोण

कभी-कभी सबसे अच्छा समाधान दोनों का उपयोग करना है

public class PdfService
{
    private readonly ILogger<PdfService> _logger;

    public async Task<byte[]> GeneratePdfAsync(PdfRequest request)
    {
        // Simple documents - use QuestPDF (fast, low resources)
        if (request.IsSimpleLayout)
        {
            return GenerateWithQuestPdf(request);
        }

        // Complex documents with web content - use PuppeteerSharp
        return await GenerateWithPuppeteerAsync(request);
    }

    private byte[] GenerateWithQuestPdf(PdfRequest request)
    {
        // QuestPDF code here - much faster for simple layouts
        return Document.Create(container =>
        {
            container.Page(page =>
            {
                page.Size(PageSizes.A4);
                page.Margin(2, Unit.Centimetre);
                page.Content().Text(request.Content);
            });
        }).GeneratePdf();
    }

    private async Task<byte[]> GenerateWithPuppeteerAsync(PdfRequest request)
    {
        // PuppeteerSharp code for complex layouts
        await using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
        {
            Headless = true
        });

        await using var page = await browser.NewPageAsync();
        await page.SetContentAsync(request.HtmlContent);
        return await page.PdfDataAsync();
    }
}

निष्कर्ष

PuppeteerSharp मेरे नेट परियोजनाओं में ई के लिए एक पूर्ण खेल रहा है।

यहाँ मैं क्या सिफारिश करता हूँ

  1. पुppeteerSharp के साथ प्रारंभ करें यदि आप Chrome को केवल परीक्षण कर रहे हैं

  2. प्लेराइट का उपयोग करें अगर आप को बहुआयामी-ब्राउजर समर्थन की जरूरत है. यह'\puppeteerSharp प्लस फायरफॉक्स और सैफारी के सभी लाभ प्राप्त किए हैं

  3. सेलेनियम से बचें नए परियोजनाओं के लिए जब तक कि आपके पास इसका उपयोग करने का कोई विशिष्ट कारण न हो

  4. सही तरीके से टेस्ट लिखेंपरीक्षण धीमी होते हैं और टूट सकते है।

  5. परीक्षणों को अलग रखेंप्रत्येक परीक्षण को अपना डाटा स्थापित करना चाहिए और अपने आप के बाद साफ होना चाहिए

  6. सहायक विधियों का उपयोग करें उदारता से. मैं दिखाया था आधार वर्ग पैटर्न आपके वास्तविक परीक्षण कोड को साफ रखता है और आप क्या परीक्षण कर रहे हैं पर ध्यान देता है

E2E परीक्षण करने के लिए ' दर्दनाक नहीं होना चाहिये। \x97 योग़्य औजारों और नमूने के साथ-साथ \ x97 यह वास्तव में काफी सुखद हो सकता है।

सही, मैं'मैं अधिक परीक्षण लिखने के लिए बाहर हूँ

आगे पढ़ने

Finding related posts...
logo

© 2026 Scott Galloway — Unlicense — All content and source code on this site is free to use, copy, modify, and sell.