DEV Community: Mukarram Javid

Automate Web Testing in C#: A Guide with PuppeteerSharp and SpecFlow

Mukarram Javid — Sat, 09 Nov 2024 22:15:11 +0000

Learn how to efficiently automate and test web applications in C# using PuppeteerSharp and SpecFlow for streamlined end-to-end testing.

This article may be longer than expected, but I hope you enjoy it.

We often need to automate tasks or test applications as developers or testers. In such cases, there is usually limited time for manual testing, making PuppeteerSharp an ideal tool for task automation.

Before starting, we need to install two NuGet packages by running the following commands in the Package Manager Console window.

Install-Package SpecFlow.NUnit
Install-Package PuppeteerSharp

I have discussed Puppeteer in a previous blog you can read it by clicking here.

I’ll have a small discussion regarding SpecFlow.

SpecFlow is a .NET tool used to support Behavior-Driven Development (BDD) by enabling you to write tests in plain language that are easy to read and understand. SpecFlow allows developers and non-technical stakeholders to collaborate on defining application behavior in terms of scenarios written in Gherkin syntax (Given-When-Then format)

Key Features of SpecFlow

Gherkin Syntax: Write test scenarios in plain English, making them accessible to both technical and non-technical team members. Integration with .NET: SpecFlow is designed specifically for the .NET ecosystem, enabling seamless integration with tools like NUnit, MSTest, and xUnit.
Automated Tests: Scenarios written in SpecFlow can be automatically converted into executable test cases, which can be run to verify application behavior.
BDD Workflow: Facilitates a BDD approach, where teams define requirements through examples, making tests serve as both documentation and a verification tool.

By combining SpecFlow with tools like PuppeteerSharp, you can create powerful, readable automation tests for web applications, streamlining both development and testing.

Let’s dive into the coding part.

In this article, I will use Visual Studio for development. we might need to install an extension of SpecFlow in Visual Studio. You can either install it from VS 2022 or manually. It is totally upto you. I assume you have installed this extension.

We create a NUnit project for this.

We do not need UnitTest1.cs file. So we can delete this. Our project will look like this.

Now create some folders to manage our code.

Utilities (Helpers will be placed in the Utilities folder)
Features (All Feature files will be stored in the Features folder)
Steps (Step definitions will be organized in the Steps folder)

For example, we want to do GoogleSearch.

Here will be our possible steps to do that search

Go to Google.com
Write some text i.e PuppeteerSharp in the search bar
Press Enter
Match the search result with provided string.

To define steps we need .feature file. we will create the file in Features folder. “GoogleSearch.feature”. When we add New Item, we will see the SpecFlow section (if you installed SpecFlow extension) in left side of window.

When we click on this section. we will see related items of SpecFlow. We need Feature File for SpecFlow. Select it and named it and click on Add button

After adding the feature file. Let’s breakdown of the contents of a Feature file:

1. Feature
The Feature keyword describes a high-level functionality or behavior of the application.

Example:

Feature: Google Search Functionality
  As a user
  I want to search for text on Google
  So that I can verify the search results match the expected output

In order to: The goal or purpose of the feature.
As a: The role of the person interacting with the feature.
I want to: The actual action or behavior expected from the feature.

2. Scenario
Each Scenario describes a test case with a clear purpose. In this case, the scenario is to search for the term “PuppeteerSharp” on Google and verify that the results contain the expected string.

Scenario: Search for PuppeteerSharp on Google

3. Given, When, Then Steps
The Given, When, Then structure describes the flow of the scenario. Let’s map each of your steps to these terms.

Given: Describes the initial state (here, that the user is on Google’s homepage).
When: Describes actions taken by the user (entering text and pressing Enter).
Then: Describes the expected outcome (the search result should match the expected text).

Here’s how your scenario would look:

  Given I am on Google.com
  When I enter "PuppeteerSharp" in the search bar
  And I press Enter
  Then the search results should contain the text "PuppeteerSharp"

Full Feature File Example
Combining the elements above, here’s the full Feature file:

# GoogleSearch.feature

Feature: Google Search Functionality
  As a user
  I want to search for text on Google
  So that I can verify the search results match the expected output

  Scenario: Search for PuppeteerSharp on Google
    Given I am on Google.com
    When I enter "PuppeteerSharp" in the search bar
    And I press Enter
    Then the search results should contain the text "PuppeteerSharp"

In SpecFlow, we will create methods for each step in a Step Definition file, which links the steps in your Feature file to the actual code that performs those actions. Each method corresponds to a specific step and uses attributes like [Given], [When], and [Then] to associate with the Gherkin steps.

Here’s an example Step Definition file for your steps:

[Binding]
 public class GoogleSearchSteps
 {
     [Given(@"I am on Google.com")]
     public async Task GivenIAmOnGoogleCom()
     {
     }

     [When(@"I enter ""(.*)"" in the search bar")]
     public async Task WhenIEnterTextInTheSearchBar(string searchText)
     {
     }

     [When(@"I press Enter")]
     public async Task WhenIPressEnter()
     {
     }

     [Then(@"the search results should contain the text ""(.*)""")]
     public async Task ThenTheSearchResultsShouldContainTheText(string expectedText)
     {
     }
 }

To initialize the browser, we will create a file named BrowserHelper.cs in the Utilities folder and have the GoogleSearchSteps class inherit from it. In BrowserHelper.cs we initialize the browser using Puppeteer and GoogleSearchSteps inherit from it

BrowserHelper will look like this:

  // BrowserHelper.cs

    public class BrowserHelper
    {
        public static IBrowser _browser;
        public static IPage _page;
        public async Task Init()
        {
            var revision = await new BrowserFetcher(SupportedBrowser.Chromium).DownloadAsync();

            _browser = await Puppeteer.LaunchAsync(new LaunchOptions()
            {
                Headless = false,
                ExecutablePath = revision.GetExecutablePath()
            });

            _page = await _browser.NewPageAsync();
        }
    }

// GoogleSearchSteps

[Binding]
public class GoogleSearchSteps : BrowserHelper
{
}

One more class we might need named Hook.

In SpecFlow, the Hook class is used to execute specific code before or after certain events during test execution. Hooks provide a way to set up and tear down resources, prepare data, and perform cleanup tasks.

1. [Binding] Attribute

Marks the Hooks class as a SpecFlow binding class, allowing SpecFlow to recognize and execute the hooks within this class.
Ensures that the Hooks class is loaded and its hooks are applied to each test scenario.

2. Inheritance from BrowserHelper

The Hooks class inherits from BrowserHelper, suggesting that BrowserHelper contains methods or properties related to initializing or managing a browser instance.
This inheritance likely provides access to browser-related functionality used for automated testing (such as launching or closing a browser).

3. [BeforeScenario] Hook

[BeforeScenario] is an attribute provided by SpecFlow that marks a method to be run before each test scenario begins.
Purpose: This is often used to set up prerequisites for the test, such as initializing the browser, preparing test data, or configuring the environment.
Implementation: In this example, FirstBeforeScenario():
Calls the Init() method, which likely sets up a browser session.
Init() is assumed to be a method from the BrowserHelper class.
The method is asynchronous (async), allowing it to handle asynchronous browser setup processes if needed.

[BeforeScenario]
public async Task FirstBeforeScenario()
{
    await Init(); // Initializes the browser session or other test prerequisites
}

4. [AfterScenario] Hook

[AfterScenario] is another attribute provided by SpecFlow, but it is triggered after each test scenario has finished executing.
Purpose: Commonly used to clean up resources or perform teardown operations after each test scenario, such as closing the browser, clearing test data, or resetting the environment.
Implementation: In this example, AfterScenario():
Calls _browser.CloseAsync(), which closes the browser session to free up resources.
_browser is likely a browser instance that’s initialized in the - - ---- BrowserHelper class or Init() method.
Again, the method is asynchronous, ensuring the browser shutdown operation completes before moving on.

[AfterScenario]
public async Task AfterScenario()
{
    await _browser.CloseAsync(); // Closes the browser session or cleans up resources
}

Hooks.cs will look like this:

// Hooks.cs

[Binding]
public sealed class Hooks : BrowserHelper
{
    [BeforeScenario]
    public async Task FirstBeforeScenario()
    {
       await Init();
    }

    [AfterScenario]
    public async Task AfterScenario()
    {
       await _browser.CloseAsync();
    }
}

Let’s rebuild the project to resolve our dependencies. After building, open the Test Explorer to view our tests. The test window will then look like this:

To see Test Explorer;

View > Test Explorer or we can use Short key CRTL + E, T.

To run this test, right-click on the test SearchForPuppeteerSharpOnGoogle and select 'Run'. You will see the test running. The first time, it may take a bit longer because the compiler needs to download the Chromium browser. Once the browser is downloaded, the tests will begin to run.

If the test has been successfully run, we will see a green icon indicating that the test passed successfully.

You can find the source code from here.

This is done for now. Hopefully, you enjoyed it. Have a nice day. We will see next time and in a different blog.

How to Create PDFs in React from JSON Data with jsPDF

Mukarram Javid — Sat, 02 Nov 2024 22:34:27 +0000

This article will show how to create PDF in JS/React from JSON data.

As developers, we must integrate PDF generation within the application. So, in this article, we will discuss creating PDFs using jspdf.

So, Let’s get started.

We will use a React environment specifically for this article. I assume you’re familiar with JavaScript/React and have already set up the React environment

Before diving in, we need some sample data to generate the PDF. We’ll create a method to generate this data.

const generateUsers = (count) => {
    const users = [];

    for (let i = 1; i <= count; i++) {
      const user = {
        id: i,
        firstName: `firstName_${i}`,
        lastName: `lastName_${i}`,
        email: `email_${i}@example.com`,
        address: [
          `Street ${i + 1}, Address Line 1`,
          `District ${(i % 7) + 1}, City_${i}`,
        ],
      };
      users.push(user);
    }
    return users;
  };

Now, we need to install some npm packages jspdf and jspdf-autotable.

jsPDF is responsible for creating PDFs, while jsPDF-AutoTable is used to display data in a table format within the PDF.

You can use the following command to install both packages.

npm i jspdf-autotable jspdf

Now, we are going to develop a method to handle PDF creation. I’ll create a generic generatePDF method, so you can use it anywhere you need.

1. Function Definition

The function generatePDF takes data as an argument, which is expected to be an array of objects (the JSON data to include in the PDF).

export const generatePDF = (data) => {

2. PDF Document Setup
A new jsPDF instance is created with the following options:

"l" for landscape orientation.
"pt" as the unit of measurement (points).
"a3" as the paper size.

const doc = new jsPDF("l", "pt", "a3");

// if you want to use custom dimensions
// width,height

const doc = new jsPDF("l", "pt", [3000,1000]);

3. Adding Title to the PDF

Sets the font size to 16 points.
Adds a centered title, "JSON Data PDF", at the top of the page (y-position of 30).

doc.setFontSize(16);
doc.text("JSON Data PDF", doc.internal.pageSize.getWidth() / 2, 30, {
    align: "center",
});

4. Extracting Table Headers

Extracts the keys from the first object in data to use as column headers for the table.
Assumes data has at least one object, and all objects have similar keys.

const tableColumnHeaders = Object.keys(data[0]);

5. Formatting Table Rows

Iterates over each object in data, creating a new array (tableRows) where:

Each entry corresponds to a row of the table.
For each cell, if the value is an array, it joins elements with a comma; otherwise, it adds the value as is.

const tableRows = data.map((row) =>
    Object.keys(row).map((key) => {
        const value = row[key];
        if (Array.isArray(value)) {
            return value.join(", ");
        }
        return value;
    })
);

6. Adding the Table to the PDF

Configures the table with the following options:

startY: 50 positions the table 50 points below the top of the page.
head uses tableColumnHeaders as the table’s header row.
body is populated with tableRows, displaying data row-by-row.
margin specifies spacing around the table.
styles adjusts the cell font size, padding, and vertical alignment.
headStyles sets header row styles: blue background, white text, and 12-point font.
alternateRowStyles adds a light gray background for alternating rows.
columnStyles attempts to set column width automatically.
theme: "striped" applies a striped theme to the table.

doc.autoTable({
    startY: 50,
    head: [tableColumnHeaders],
    body: tableRows,
    margin: { top: 50, left: 20, right: 20 },
    styles: {
        fontSize: 10,
        cellPadding: 5,
        valign: "middle",
    },
    headStyles: { fillColor: [41, 128, 185], textColor: 255, fontSize: 12 },
    alternateRowStyles: { fillColor: [245, 245, 245] },
    columnStyles: { auto: { cellWidth: auto } },
    theme: "striped",
});

7. Saving the PDF
Saves the PDF file with the filename "JS-pdf.pdf".

doc.save(`${fileName}.pdf`);

Here is the full version of this code.

// App.jsx

import "./styles.css";
import { generatePDF } from "./pdf.jsx";

export default function App() {
 const generateUsers = (count) => {
    const users = [];

    for (let i = 1; i <= count; i++) {
      const user = {
        id: i,
        firstName: `firstName_${i}`,
        lastName: `lastName_${i}`,
        email: `email_${i}@example.com`,
        address: [
          `Street ${i + 1}, Address Line 1`,
          `District ${(i % 7) + 1}, City_${i}`,
        ],
      };
      users.push(user);
    }
    return users;
  };

  const PdfGenerator = () => {
    let jsonData = generateUsers(100);
    generatePDF(jsonData);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={PdfGenerator}>Print PDF</button>
    </div>
  );
}

//Pdf.jsx

import jsPDF from "jspdf";
import "jspdf-autotable";


export const generatePDF = (data) => {

  let fileName = "JS-pdf";
  const doc = new jsPDF("l", "pt", "a3");

  doc.setFontSize(16);
  doc.text("JSON Data PDF", doc.internal.pageSize.getWidth() / 2, 30, {
    align: "center",
  });

  const tableColumnHeaders = Object.keys(data[0])

  // Determine the table rows based on the values in data
  const tableRows = data.map((row) =>
    Object.keys(row).map((key) => {
          const value = row[key];

          if (Array.isArray(value)) {
            return value.join(", ");
          }
          return value; // Return non-array values as is
        })
  );

  doc.autoTable({
    startY: 50,
    head: [tableColumnHeaders],
    body: tableRows,
    margin: { top: 50, left: 20, right: 20 },
    styles: {
      fontSize: 10,
      cellPadding: 5,
      valign: "middle",
    },
    headStyles: { fillColor: [41, 128, 185], textColor: 255, fontSize: 12 },
    alternateRowStyles: { fillColor: [245, 245, 245] },
    columnStyles: { auto: { cellWidth: auto } }
    theme: "striped",
  });

  doc.save(`${fileName}.pdf`);
};

This is done for now. Hopefully, you enjoyed it. Have a nice day !!!