DEV Community: webship.co

Testing Radio Buttons with Webship-js

webship.co — Tue, 23 Dec 2025 11:47:34 +0000

Radio buttons are commonly used in websites when only one option must be selected at a time, such as account registration settings, user permissions, or visibility rules.

Because these choices directly affect how a system behaves, it’s essential to make sure that the selected option is saved correctly and remains unchanged after saving and reloading the page.

In this article, we demonstrate how to automatically verify radio button behavior in a Drupal CMS website using Webship-JS, ensuring the selection works exactly as expected.

We will use three steps specific to the radio button:
When I select radio button "value"

Selects the radio button specified by label text, value, or selector.

When (I |we ) select radio button "([^"]*)?"

Example #1: When I select radio button "Male"

Example #2: When I select radio button "female"
Example #3: When I select radio button "#gender-male"
Example #4: When we select radio button "option1"

Real Testing Context

We will walk through a real, practical example of a Drupal CMS system.
A radio button option is selected, saved, and automatically verified to ensure the correct setting is retained.

Feature: Radio Button Validation for Account Registration Settings in Drupal CMS
 Performed as an administrator.

 Scenario: Validate radio button selection
  Given I am on the homepage
   When I click "Log in"
    And I fill in "#edit-name" with "info@webship.co" by attr
    And I fill in "#edit-pass" with "d" by attr
    And I press "#edit-submit" by attr
    And I go to "/admin/config/people/accounts"
    And I scroll down 500
    And I select radio button "Visitors, but administrator approval is required"
    And I press "Save configuration"
    And I scroll down 500
   Then the radio button "Visitors, but administrator approval is required" should be selected
    And the radio button "Administrators only" should not be selected

See the full article:

Imagine selecting the “Youth” age range.
Later, you come back and suddenly find yourself classified as “Old Age”.
For a moment, it feels like your hair turned white all at once.

That kind of surprise is exactly what shouldn’t happen in a system.
Radio buttons are supposed to reflect one clear choice, and any unexpected change reveals a real problem.

Learn more about Step Definitions in Webship-js
Visit the documentation site:- https://webship.co/docs

Converted all Behat WebAPIExtension step definitions to Node.js, packaged in Webship-JS

webship.co — Tue, 02 Dec 2025 11:27:58 +0000

Behat’s WebAPIExtension was a simple and effective way to test JSON-based APIs using Gherkin steps. On July 14, 2025, the repository was archived by its owner and became read-only, meaning it’s no longer maintained, but not abandoned in purpose.

At Webship.co, we saw great value in the extension’s structured API-testing approach. So instead of letting it fade away, we rebuilt all of its step definitions in Node.js and integrated them directly into Webship-JS.
Now, teams can use the same clear BDD style, but with modern JavaScript tooling and active support.

Why WebAPIExtension was worth reviving

It made API testing readable and easy to understand.
It supported setting headers, sending JSON bodies, checking status codes, and validating responses.
It helped teams describe API behavior in a simple Given/When/Then format.

We kept all these strengths, and enhanced them.

What’s new in Webship-js

Our rebuilt API steps now support:

Setting headers and request bodies
Sending all HTTP methods (GET, POST, PUT, DELETE…)
Validating status codes
Matching JSON responses, including nested fields
Checking response headers
Using matcher patterns (regex, array length, JWT, etc.)

*Example: *
Sends a request (POST, PUT, etc.) to the given endpoint, using the values listed in the table as the JSON request body.

When I send a POST request to "/users" with values:
            | name  | John Doe         |
            | email | john@example.com |
            | age   | 30               |

Full documentation of the steps is available here:
https://webship.co/docs/webship-js/1.0.x/api-step-definitions

Conclusion

Although the original WebAPIExtension is now archived, its value continues.
With our Node.js rebuild, Webship-JS brings it back — cleaner, faster, and actively maintained.
The same familiar BDD API experience, but modern and ready for real projects today.

When I send a METHOD request to "endpoint"

webship.co — Tue, 28 Oct 2025 11:54:14 +0000

API testing is a crucial step to ensure that web systems and applications function smoothly.
It involves sending different types of requests to specific API endpoints, such as GET, POST, PUT, or DELETE, to verify the server’s response and data accuracy.

The core of every API test is the step:

When I send a METHOD request to 'endpoint'

This step definition is used to send an HTTP request (GET, POST, PUT, DELETE, etc.) to a given API endpoint. It’s the action step that actually makes the call using the data, headers, and base URL you’ve set in previous steps.

Tells the test to make an HTTP request using the chosen method (GET, POST, PUT, DELETE…) to the specified path.

Example #1: When I send a GET request to "/users"
Example #2: When I send a POST request to "/posts"
Example #3: When I send a PUT request to "/users/1"
Example #4: When I send a DELETE request to "/posts/1"

Real Testing Context

We’ll use the GET method to test the /node/blog endpoint in Drupal CMS, ensuring it responds successfully with a status code of 200.

Feature: API Functional Testing for Drupal CMS Blog Endpoint
  This feature demonstrates how to test the API endpoint for blog content.
  It focuses on sending a GET request to the blog node and checking the response status.

  Background:
    Given the API base URL is "http://localhost/test/drupalCMS/web/api/v1"

  Scenario: Check the blog node API response
    Given I am on "/api/v1"
     When I send a GET request to "/node/blog"
    Given I am on "/api/v1/node/blog"
     Then the API response code should be 200

See the full article: https://webship.co/blog/when-i-send-method-request-endpoint

Automated testing not only saves time but also prevents human errors, helping catch issues before they ever reach the end user.
And while it’s a serious process, testing can sometimes feel like a playful challenge with code: you send a request, wait for the response, and either smile when it works… or laugh when it fails.

Webship-js: Click and See 'operation' in "text" row

webship.co — Wed, 24 Sep 2025 12:08:49 +0000

In the world of website and system management, tables are always at the core: user names, records, operations, all stored there. And sometimes, simply checking that options like Edit or Delete appear in the right row makes a huge difference. It ensures the system works as expected and gives you the flexibility to modify or remove data with ease.

The problem? Testing these details manually can be boring and time-consuming. That’s where Webship-js comes in: a tool built to make the process simpler and faster. With just two steps, Click and See, you can confirm the options appear exactly where they should, with no headaches and no unnecessary complexity.

The basic steps used are:

When I click "operation" in "text" row

This step finds a table, locates a row containing the identifier text, and then clicks on the target text within that row.

Clicks on specific text within a table row that contains a specified identifier text.

*Example: *

When I click "Edit" in the "John Smith" row
When I click "Delete" in the "Product A" row  
When we click "View Details" in the "Order #12345" row
And I click "Download" in the "Report 2024" row

*Then I should see "operation" in "text" row *

This step finds a table, locates a row containing the identifier text, and then verifies that the target text is visible within that row.

Asserts that specific text is visible within a table row that contains a specified identifier text.

Example:

Then I should see "Active" in the "John Smith" row
Then I should see "In Stock" in the "Product A" row  
Then we should see "Processing" in the "Order #12345" row
And I should see "Admin" in the "john.smith@example.com" row

See the full article: https://webship.co/blog/webship-js-click-and-see-operation-text-row

Manual testing is like washing dishes by hand: tedious, slow, and never-ending.
Automated testing, on the other hand, is like using a dishwasher: fast, automatic, and a real time-saver.
So the next time you think about browsing through rows one by one... just remember: machines love repetitive work, humans don’t!

Webship-js: When I attach the file "file name" to "element"

webship.co — Wed, 27 Aug 2025 11:27:55 +0000

Webship-js: When I attach the file "file name" to "element"

Automated testing isn’t complete without touching the finer details of the digital experience, and file uploads are one of the most crucial. This step reveals whether a site smoothly handles user interactions or stumbles at the first simple challenge. It’s the moment of truth that puts the system under the microscope.

When I attach the file "file name" to "element"

This step defines the test for attaching files to the file input element, enabling their upload for use in a subsequent action.

A folder containing a set of test files (e.g., images, documents, etc.) should be placed under the tests/assets directory.
These files must be uploaded in advance with the appropriate file name. During the feature steps, the files are referenced and loaded into the file input element. In the subsequent step, the intended action is performed on the uploaded file.

For the proper configuration of the tests/assets folder path, see the Global Settings page.

Create a step that enables attaching a file to a field identified by its id|class|name|label.

Example:

When I attach the file "profileIcon.jpg" to "#profileIconUpload"

See the full article:https://webship.co/blog/webship-js-when-i-attach-file-file-name-element

Adding this step means leaving no blind spots in the user journey. We upload the file in testing to make sure the user won’t end up uploading their stress later! 😅 Therefore, peace of mind feels much lighter when we know everything works as it should.

Webship-js: When I scroll ( left, right, to start, to the end )

webship.co — Thu, 24 Jul 2025 11:32:26 +0000

From interactive portfolios and product galleries to immersive storytelling sites and modern landing pages, many websites today embrace horizontal scrolling to break away from traditional layouts and deliver a unique user experience.
This sideways navigation offers a cinematic feel, guiding users through content like frames in a storyboard. But with this creativity comes complexity.
That’s why automated testing becomes crucial — to ensure every scroll right, scroll left, scroll to start, and scroll to end behaves smoothly across all devices and browsers.
Functional, fluid, and flawless — that's what horizontal scrolling should be, and automated tests help make that promise real.

When I scroll

Use this step to simulate horizontal scroll actions in your automated test scenarios.
It's especially useful for testing horizontally designed websites, such as interactive portfolios, sliders, or product showcases — where elements are revealed as the user scrolls sideways.

These are the scroll directions you can control during testing:

When I scroll left
When I scroll right
When I scroll to start
When I scroll to the end

This allows you to ensure that all content is accessible, visible, and functioning correctly — regardless of where it sits on the horizontal axis.

See the full article: https://webship.co/blog/webship-js-when-i-scroll-left-right-start-end

Conclusion

Horizontal scrolling brings creativity — but also complexity.
One missed scroll, one hidden button, or one broken layout can ruin the experience.
That’s why we test.
With automation, we validate every step: scroll left, scroll right, jump to start, reach the end — no surprises, no slip-ups.

After all, great design deserves great testing —
because smooth scrolling isn’t just satisfying... It’s silent proof that everything works. ✅🎯

Webship-js: When I scroll

webship.co — Mon, 16 Jun 2025 12:08:25 +0000

In today’s modern websites, scrolling is no longer just a basic interaction; it has become a vital part of the user experience, especially on pages that load content progressively or contain long, information-rich sections.
Carefully testing scroll behaviour helps ensure that content appears smoothly and users don’t feel lost or interrupted while navigating.
It’s a small detail… but a big key to a seamless experience.

When I scroll

Use this step when you want to simulate a scroll action on the page during your automated testing scenario.
It can be helpful to test lazy-loaded elements, infinite scroll areas, or to simply bring specific elements into view.

These are the scroll steps you can use to control the page movement during testing.

When I scroll down
When I scroll up
When I scroll to top
When I scroll to the bottom

See the full article:https://webship.co/blog/webship-js-when-i-scroll

Scrolling, though a quiet part of the user experience, carries great weight in shaping comfort and impression, and testing it carefully isn’t just a technical task but a way of caring for the little details that make a big difference, because a good digital experience isn’t read all at once, it’s built line by line and scroll by scroll.

And let’s be honest , no one enjoys chasing content that hides as they scroll… like a cheeky game of hide-and-seek! 🙈👀

You can see more step definitions: https://webship.co/docs

Webship-js: Then the "item" link should contain "url"

webship.co — Mon, 26 May 2025 12:17:03 +0000

In website testing, every detail matters. One small broken link can damage trust and user experience. That’s why checking if important links, like social media icons, lead to the right place is a vital step. This kind of step ensures that users are never left wondering or lost.

One of the key steps in automated functional acceptance testing is verifying that each link leads where it should. In this article, we’ll focus on the step:

Then the "item" link should contain "url"

This definition step ensures that the the href attribute of a link element includes a URL or part of a URL, with the element located using its link text.

Example:
Then the "Login" link should contain "/log-in"

See the full article:https://webship.co/blog/webship-js-then-item-link-should-contain-url
You can see more step definitions: https://webship.co/docs

Webship-js: When I reload the page

webship.co — Wed, 23 Apr 2025 09:23:19 +0000

When designing automated tests for websites, we often focus on clicks, data entry, or verifying elements...
However, there’s one crucial step that many overlook — reloading the page.

This action simulates a very common real-world user behavior, such as clicking the “refresh” button or reopening the page. That’s where the step:

When I reload the page

comes in — used to test the website’s stability after a refresh. Does the site retain its state? Do key elements disappear or break?

In this article, we’ll explore the importance of this step, when to use it, and demonstrate it on a safe and open-source website.

Why Is Reload Testing Important?
Reloading a web page may seem trivial, but it can uncover hidden issues — like:

Cookie banners that reappear after being dismissed
Forms that reset unexpectedly
Dynamic content that fails to reload correctly
User settings or preferences that don’t persist

Testing these behaviors helps ensure a smooth and consistent user experience.

The Test Scenario: Cookie Banner Behavior
We chose the site https://starfish-greathearts.org
for this test.
It displays a cookie banner when you first land on the homepage.

You can see more step definitions: https://webship.co/docs
See the full article:https://webship.co/blog/webship-js-when-i-reload-page

How Can AI Fix Bugs Automatically?

webship.co — Thu, 27 Mar 2025 10:05:29 +0000

Introduction:
If you’ve ever worked in software development or testing, you know how frustrating it can be to find and fix bugs. In the past, developers had to spend hours manually searching for issues, analyzing code, and coming up with solutions. But with the rise of AI, things are changing fast! Now, AI can detect and fix bugs automatically, without the need for constant human intervention.

How Does AI Detect Bugs?
AI uses techniques like machine learning and big data analysis to predict and catch bugs before they even happen. Modern tools can:

Identify common coding mistakes.
Compare code with a massive database of past bugs.
Run automated tests to spot potential issues in the system.

For more insights on AI-powered bug detection, check out this article: https://blog.railtown.ai/blog-posts/how-ai-can-detect-software-bugs-and-root-cause-analysis 🔗

How Can AI Fix Bugs on Its Own? Once AI finds a problem, it can either suggest solutions or even fix them automatically using smart techniques like: ✅ Auto-correcting code: AI scans the code, suggests fixes, or even applies them directly. ✅ Re-running tests and adjusting scenarios: If a bug is found, AI can tweak test cases and run them again to make sure everything works. ✅ Analyzing error logs: AI looks through millions of past bugs to find the best solution for the current issue.

See the full article:https://webship.co/blog/how-can-ai-fix-bugs-automatically

Automate testing of your website’s consent management for the Privacy Policy and cookies

webship.co — Tue, 25 Feb 2025 12:03:19 +0000

In the digital age, protecting user privacy is no longer optional—it’s a necessity mandated by global regulations like GDPR and CCPA. As the demand for transparency grows, consent management tools for cookies and privacy policies have become an essential part of any website. But how can you ensure these tools function efficiently without constant manual review? This is where automated testing comes in, ensuring seamless compliance and a secure, hassle-free user experience.

We will demonstrate automated functional acceptance testing for consent management of the Privacy Policy and cookies using Webship-JS on the website unesco.org

Additionally, we will conduct another automated functional acceptance test for consent management on the website bbc.com

, ensuring compliance and seamless functionality.

With Webship-JS, you can test any consent management format available on a website, regardless of its design or implementation. This ensures complete flexibility and adaptability to different structures and compliance frameworks.

Gherkin scripts for testing the Privacy Policy and Cookies at https://bbc.com

See the full article:https://webship.co/blog/automate-testing-your-websites-consent-management-privacy-policy-and-cookies

You can see more step definitions: https://webship.co/docs

Webship-js: When I wait

webship.co — Tue, 21 Jan 2025 12:24:27 +0000

The "when I wait" step in Webship-JS is crucial for ensuring that your automated tests simulate realistic user behavior. It allows you to introduce pauses or delays in the test execution, ensuring that elements load fully or actions complete before the next steps are executed. This step is particularly important when dealing with dynamic content or AJAX requests, as it guarantees that the page is ready for the next interaction, preventing errors due to incomplete loading or unresponsive elements. By using this step, you enhance the reliability and accuracy of your tests.

This step definition specifies that the user will pause or wait for a defined duration—either a set number of seconds/minutes, a maximum number of seconds/minutes, or until the page fully loads—before proceeding to the next step.

This step is typically used where a delay or time-based action is expected.

When I wait until the page loaded
When I wait {number} seconds
When I wait max {number} seconds
When I wait {number} minutes
When I wait max {number} minutes

When I wait until the page loaded

This step definition acts as a command to wait until the page's body fully loads before performing any actions on the page

The page body loading time is set to 10 seconds. If the body isn't loaded within this time frame, an error will be triggered for this step definition.

Example:

When I wait until the page is loaded
When we wait until the page loaded

See the full article:https://webship.co/blog/webship-js-when-i-wait

You can see more step definitions: https://webship.co/docs