Gathering detailed insights and metrics for playwright-fluent
Installations
npm install playwright-fluentDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=12
Node Version
18.12.1
NPM Version
8.19.2
Score
62.7
Supply Chain
98.2
Quality
76.1
Maintenance
100
Vulnerability
99.3
License
Releases
119
Contributors
6
Unable to fetch Contributors
Languages
4
TypeScript
HTML
JavaScript
Dockerfile
TypeScript (85.2%)
HTML (14.34%)
JavaScript (0.44%)
Dockerfile (0.02%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
hdorgeval
Download Statistics
Total Downloads
177,175
Last Day
106
Last Week
502
Last Month
3,238
Last Year
48,707
GitHub Statistics
MIT License
174 Stars
1,214 Commits
12 Forks
8 Watchers
1 Branches
6 Contributors
Updated on Dec 22, 2024
Bundle Size
262.63 kB
Minified
41.34 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.61.0
Package Id
playwright-fluent@1.61.0
Unpacked Size
1.65 MB
Size
197.42 kB
File Count
1,671
NPM Version
8.19.2
Node Version
18.12.1
Published on
May 03, 2023
Total Downloads
Cumulative downloads
Total Downloads
177,175
Last Day
-4.5%
106
Compared to previous day
Last Week
-42.3%
502
Compared to previous week
Last Month
8.5%
3,238
Compared to previous month
Last Year
12.5%
48,707
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
playwright-fluent
Fluent API around Playwright
Fluent API | Selector API | Assertion API | Mock API | FAQ | with jest | with cucumber-js v6 | with cucumber-js v7
Installation
1npm i --save playwright-fluent
If not already installed, the playwright package should also be installed with a version >= 1.12.0
Usage
1import { PlaywrightFluent, userDownloadsDirectory } from 'playwright-fluent'; 2 3const p = new PlaywrightFluent(); 4 5await p 6 .withBrowser('chromium') 7 .withOptions({ headless: false }) 8 .withCursor() 9 .withDialogs() 10 .recordPageErrors() 11 .recordFailedRequests() 12 .recordDownloadsTo(userDownloadsDirectory) 13 .emulateDevice('iPhone 6 landscape') 14 .navigateTo('https://reactstrap.github.io/components/form/') 15 .click('#exampleEmail') 16 .typeText('foo.bar@baz.com') 17 .pressKey('Tab') 18 .expectThatSelector('#examplePassword') 19 .hasFocus() 20 .typeText("don't tell!") 21 .pressKey('Tab') 22 .expectThatSelector('#examplePassword') 23 .hasClass('is-valid') 24 .hover('#exampleCustomSelect') 25 .select('Value 3') 26 .in('#exampleCustomSelect') 27 .close();
This package provides also a Selector API that enables to find and target a DOM element or a collection of DOM elements embedded in complex DOM Hierarchy:
1const selector = p 2 .selector('[role="row"]') // will get all dom elements, within the current page, with the attribute role="row" 3 .withText('foobar') // will filter only those that contain the text 'foobar' 4 .find('td') // from previous result(s), find all embedded <td> elements 5 .nth(2); // take only the second cell 6 7await p.expectThat(selector).hasText('foobar-2');
Usage with Iframes
This fluent API enables to seamlessly navigate inside an iframe and switch back to the page:
1const p = new PlaywrightFluent();
2const selector = 'iframe';
3const inputInIframe = '#input-inside-iframe';
4const inputInMainPage = '#input-in-main-page';
5await p
6 .withBrowser('chromium')
7 .withOptions({ headless: false })
8 .withCursor()
9 .navigateTo(url)
10 .hover(selector)
11 .switchToIframe(selector)
12 .click(inputInIframe)
13 .typeText('hey I am in the iframe')
14 .switchBackToPage()
15 .click(inputInMainPage)
16 .typeText('hey I am back in the page!');Usage with Dialogs
This fluent API enables to handle alert, prompt and confirm dialogs:
1const p = new PlaywrightFluent();
2
3await p
4 .withBrowser(browser)
5 .withOptions({ headless: true })
6 .WithDialogs()
7 .navigateTo(url)
8 // do some stuff that will open a dialog
9 .waitForDialog()
10 .expectThatDialog()
11 .isOfType('prompt')
12 .expectThatDialog()
13 .hasMessage('Please say yes or no')
14 .expectThatDialog()
15 .hasValue('yes')
16 .typeTextInDialogAndSubmit('foobar');Usage with the tracing API
This fluent API enables to handle the playwright tracing API in the following way:
1const p = new PlaywrightFluent();
2
3await p
4 .withBrowser(browser)
5 .withOptions({ headless: true })
6 .withTracing()
7 .withCursor()
8 .startTracing({ title: 'my first trace' })
9 .navigateTo(url)
10 // do some stuff on the opened page
11 .stopTracingAndSaveTrace({ path: path.join(__dirname, 'trace1.zip') })
12 // do other stuff
13 .startTracing({ title: 'my second trace' })
14 // do other stuff
15 .stopTracingAndSaveTrace({ path: path.join(__dirname, 'trace2.zip') });Usage with collection of elements
This fluent API enables to perform actions and assertions on a collection of DOM elements with a forEach() operator.
See it below in action on ag-grid where all athletes with Julia in their name must be selected:
1const p = new PlaywrightFluent(); 2 3const url = `https://www.ag-grid.com/javascript-data-grid/keyboard-navigation/`; 4const cookiesConsentButton = p 5 .selector('#onetrust-button-group') 6 .find('button') 7 .withText('Accept All Cookies'); 8 9const gridContainer = 'div#myGrid'; 10const rowsContainer = 'div.ag-body-viewport div.ag-center-cols-container'; 11const rows = p.selector(gridContainer).find(rowsContainer).find('div[role="row"]'); 12const filter = p.selector(gridContainer).find('input[aria-label="Athlete Filter Input"]').parent(); 13 14await p 15 .withBrowser('chromium') 16 .withOptions({ headless: false }) 17 .withCursor() 18 .navigateTo(url) 19 .click(cookiesConsentButton) 20 .switchToIframe('iframe[title="grid-keyboard-navigation"]') 21 .hover(gridContainer) 22 .click(filter) 23 .typeText('Julia') 24 .pressKey('Enter') 25 .expectThat(rows.nth(1)) 26 .hasText('Julia'); 27 28await rows.forEach(async (row) => { 29 const checkbox = row 30 .find('input') 31 .withAriaLabel('Press Space to toggle row selection (unchecked)') 32 .parent(); 33 await p.click(checkbox); 34});
Usage with Stories
This package provides a way to write tests as functional components called Story:
stories.ts
1import { Story, StoryWithProps } from 'playwright-fluent'; 2 3export interface StartAppProps { 4 browser: BrowserName; 5 isHeadless: boolean; 6 url: string; 7} 8 9// first story: start the App 10export const startApp: StoryWithProps<StartAppProps> = async (p, props) => { 11 await p 12 .withBrowser(props.browser) 13 .withOptions({ headless: props.isHeadless }) 14 .withCursor() 15 .navigateTo(props.url); 16} 17 18// second story: fill in the form 19export const fillForm: Story = async (p) => { 20 await p 21 .click(selector) 22 .select(option) 23 .in(customSelect) 24 ...; 25}; 26 27// threrd story: submit form 28export const submitForm: Story = async (p) => { 29 await p 30 .click(selector); 31}; 32 33// fourth story: assert 34export const elementIsVisible: Story = async (p) => { 35 await p 36 .expectThatSelector(selector) 37 .isVisible(); 38};
test.ts
1import { startApp, fillForm } from 'stories';
2import { PlaywrightFluent } from 'playwright-fluent';
3const p = new PlaywrightFluent();
4
5await p
6 .runStory(startApp, { browser: 'chrome', isHeadless: false, url: 'http://example.com' })
7 .runStory(fillForm)
8 .close();
9
10// Also methods synonyms are available to achieve better readability
11const user = new PlaywrightFluent();
12await user
13 .do(startApp, { browser: 'chrome', isHeadless: false, url: 'http://example.com' })
14 .and(fillForm)
15 .attemptsTo(submitForm)
16 .verifyIf(elementIsVisible)
17 .close();Usage with mocks
This fluent API provides a generic and simple infrastructure for massive request interception and response mocking.
This Mock API leverages the Playwright request interception infrastructure and will enable you to mock all HTTP requests in order to test the front in complete isolation from the backend.
Read more about the Fluent Mock API
This API is still a draft and is in early development, but stay tuned!
Contributing
Check out our contributing guide.
Resources
- Playwright Fluent API documentation
- Selector API documentation
- Assertion API documentation
- Mock API documentation
FAQ
Q: How does playwright-fluent relate to Playwright?
playwright-fluent is just a wrapper around the Playwright API.
It leverages the power of Playwright by giving a Fluent API, that enables to consume the Playwright API with chainable actions and assertions.
The purpose of playwright-fluent is to be able to write e2e tests in a way that makes tests more readable, reusable and maintainable.
Q: Can I start using playwright-fluent in my existing code base?
Yes you can.
1import { PlaywrightFluent } from 'playwright-fluent';
2
3// just create a new instance with playwright's browser and page instances
4const p = new PlaywrightFluent(browser, page);
5
6// you can also create a new instance with playwright's browser and frame instances
7const p = new PlaywrightFluent(browser, frame);
8
9// now you can use the fluent APIQ: Can I use Playwright together with the playwright-fluent?
Yes you can. To use the Playwright API, call the currentBrowser() and/or currentPage() methods exposed by the fluent API:
1const browser = 'chromium';
2const p = new PlaywrightFluent();
3await p
4 .withBrowser(browser)
5 .emulateDevice('iPhone 6 landscape')
6 .withCursor()
7 .navigateTo('https://reactstrap.github.io/components/form/')
8 ...;
9
10// now if you want to use the playwright API from this point:
11const browser = p.currentBrowser();
12const page = p.currentPage();
13
14// the browser and page objects are standard playwright objects
15// so now you are ready to go by using the playwright APIQ: What can I do with the currently published npm package playwright-fluent?
The documentations:
- Playwright Fluent API documentation
- Selector API documentation
- Assertion API documentation
- Mock API documentation
reflect the current status of the development and are inline with the published package.
Q: Do you have some samples on how to use this library?
Yes, have a look to this demo project with jest, this demo project with cucumber-js v6 or this demo project with cucumber-js v7.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
6 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Reason
dependency not pinned by hash detected -- score normalized to 1
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests_pipeline.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/hdorgeval/playwright-fluent/tests_pipeline.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests_pipeline.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/hdorgeval/playwright-fluent/tests_pipeline.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests_pipeline.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/hdorgeval/playwright-fluent/tests_pipeline.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests_pipeline.yml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/hdorgeval/playwright-fluent/tests_pipeline.yml/master?enable=pin
- Warn: containerImage not pinned by hash: Dockerfile:1: pin your Docker image by updating mcr.microsoft.com/playwright:focal to mcr.microsoft.com/playwright:focal@sha256:2286c685f2be91dd3ee482f1a3d382af08c9a1049406c9f7b499aec6ad691a2c
- Warn: npmCommand not pinned by hash: Dockerfile:7
- Warn: npmCommand not pinned by hash: .github/workflows/tests_pipeline.yml:46
- Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 containerImage dependencies pinned
- Info: 1 out of 3 npmCommand dependencies pinned
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/tests_pipeline.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Score
2.9
/10
Last Scanned on 2025-03-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More