blog.manabie.io Open in urlscan Pro
2606:50c0:8000::153  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Home


MANABIE TECH BLOG

Sharing the humble technical knowledge we’re using to improve education


HOW TO USE PLAYWRIGHT IN CUCUMBERJS

Wed Dec 29, 2021 in  DevSecOps, Testing  bdd, end-to-end, cucumber, automation,
test

In our previous blog article HERE, we explained why we’re using Cucumber for E2E
test at Manabie, and provided a brief understanding about Cucumber.

This time, let’s dive a little bit deeper!

Before we start, let’s cover a brief introduction to Cucumber again, and
afterward, about Playwright.


CUCUMBER

Cucumber is a tool that supports Behaviour-Driven Development(BDD), If you’re
new to Behaviour-Driven Development read BDD introduction first.

CUCUMBERJS

 * is an open-source software testing tool written in Javascript, while the
   tests are written in Gherkin, a non-technical and human-readable language.

GHERKIN SYNTAX

Gherkin uses a set of special keywords to give structure and meaning to
executable specifications. Each keyword is translated to many spoken languages;
in this reference we’ll use English.

Each line that isn’t a blank line has to start with a Gherkin keyword, followed
by any text you like. The only exceptions are the feature and scenario
descriptions.

The primary keywords are:

 * Feature
 * Rule (as of Gherkin 6)
 * Example (or Scenario)
 * Given, When, Then, And, But for steps (or *)
 * Background
 * Scenario Outline (or Scenario Template)
 * Examples (or Scenarios)

There are a few secondary keywords as well:

 * """ (Doc Strings)
 * | (Data Tables)
 * @ (Tags)
 * # (Comments)


PLAYWRIGHT

Playwright is a framework for Web Testing and Automation. It allows testing
Chromium, Firefox and WebKit with a single API. Playwright is built to enable
cross-browser web automation that is ever-green, capable, reliable and fast.

CAPABILITIES

Playwright is built to automate the broad and growing set of web browser
capabilities used by Single Page Apps and Progressive Web Apps.

 * Scenarios that span multiple page, domains and iframes
 * Auto-wait for elements to be ready before executing actions (like click,
   fill)
 * Intercept network activity for stubbing and mocking network requests
 * Emulate mobile devices, geolocation, permissions
 * Support for web components via shadow-piercing selectors
 * Native input events for mouse and keyboard
 * Upload and download files


GETTING STARTED WITH CUCUMBER AND PLAYWRIGHT EXAMPLE

PREREQUISITES AND INSTALLATIONS

 * Prerequisites:
   * Node.js (12 or higher)
 * Installations:
   
   * Install Cucumber modules with yarn or npm
     
     * yarn:
       
       yarn add @cucumber/cucumber
       
     
     * npm:
       
       npm i @cucumber/cucumber
       
   
   * Install Playwright
     
     * yarn:
       
       yarn add playwright
       
     
     * npm:
       
       npm i playwright
       
     
     * Add the following files:
       
       * features/search_job_openings_at_manabie.feature
         
         Feature: Search job openings at Manabie
         
             Scenario: Bob search job openings at Manabie
                 Given Bob opens Manabie website
                 When Bob goes to Careers section
                 Then Bob sees all job openings at Manabie
         
       
       * features/support/world.js
         
         const { setWorldConstructor } = require("@cucumber/cucumber");
         const playwright = require('playwright');
         
         class CustomWorld {
             async openUrl(url) {
                 const browser = await playwright.chromium.launch({
                     headless: false,
                 });
                 const context = await browser.newContext();
                 this.page = await context.newPage();
                 await this.page.goto(url);
             }
         }
         
         setWorldConstructor(CustomWorld);
         
       
       * features/support/steps.js
         
         const { Given, When, Then } = require("@cucumber/cucumber");
         
         Given("Bob opens Manabie website", { timeout: 60 * 1000 }, async function () {
             await this.openUrl('http://manabie.com/');
         });
         
         When("Bob goes to Careers section", async function () {
             await this.page.click('text=Careers');
         });
         
         Then("Bob sees all job openings at Manabie", async function () {
             await this.page.click('text=View Openings');
             await this.page.waitForSelector('text=Our Openings');
         });
         
     
     * Run:
       
       ./node_modules/.bin/cucumber-js --exit
       
     
     * After run:
       
       1 scenario (1 passed)
       3 steps (3 passed)
       0m03.739s (executing steps: 0m03.729s)
       


CONCLUSION

Cucumber and Playwright are great frameworks. I hope this article will be of
some use to you. Here is source code, thank you.

Curious for more about how we’re tackling testing problems at Manabie? Join us
as an Engineer HERE, or follow our blog for future articles.


REFERENCES

 * https://github.com/cucumber/cucumber-js
 * https://github.com/microsoft/playwright

--------------------------------------------------------------------------------

About nploi
I love open source <3
https://www.linkedin.com/in/nploi

--------------------------------------------------------------------------------

SHARE



Please enable JavaScript to view the comments powered by Disqus.

LINKS

 1. About Us
 2. Careers

Except where otherwise noted, content on this site is licensed under a Creative
Commons Attribution 4.0 International license.

Back to top

This website uses cookies. Learn more.

Disagree Agree