Gathering detailed insights and metrics for playwright-fluent
Gathering detailed insights and metrics for playwright-fluent
npm install playwright-fluent
Typescript
Module System
Min. Node Version
Node Version
NPM Version
62.7
Supply Chain
98.2
Quality
76.1
Maintenance
100
Vulnerability
99.3
License
TypeScript (85.2%)
HTML (14.34%)
JavaScript (0.44%)
Dockerfile (0.02%)
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Total Downloads
177,175
Last Day
106
Last Week
502
Last Month
3,238
Last Year
48,707
MIT License
174 Stars
1,214 Commits
12 Forks
8 Watchers
1 Branches
6 Contributors
Updated on Dec 22, 2024
Minified
Minified + Gzipped
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
Cumulative downloads
Total Downloads
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
1
Fluent API around Playwright
1npm i --save playwright-fluent
If not already installed, the playwright
package should also be installed with a version >= 1.12.0
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');
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!');
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');
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') });
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});
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();
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!
Check out our contributing guide.
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.
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 API
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 API
The documentations:
reflect the current status of the development and are inline with the published package.
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
Reason
6 existing vulnerabilities detected
Details
Reason
dependency not pinned by hash detected -- score normalized to 1
Details
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
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
no SAST tool detected
Details
Reason
security policy file not detected
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
project is not fuzzed
Details
Score
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