Skip to content

Commit 5d6ef52

Browse files
lucgaganlucgagan
committed
style: apply prettier
1 parent 9159f68 commit 5d6ef52

File tree

4 files changed

+123
-23
lines changed

4 files changed

+123
-23
lines changed

‎README.md

+103-16
Original file line numberDiff line numberDiff line change
@@ -107,17 +107,16 @@ const thereAreThreeLinks = await auto("Are there 3 links on the page?", {
107107
console.log(`"There are 3 links" is a ${thereAreThreeLinks} statement`);
108108
```
109109
110-
111110
## Why use Auto Playwright?
112111
113112
Certainly! Here's a rephrased version of the provided content, presented in a markdown table:
114113

115-
| Aspect | Conventional Approach | Testing with Auto Playwright |
116-
| ------ | --------------------- | ---------------------------- |
117-
| **Coupling with Markup** | Strongly linked to the application's markup. | Eliminates the use of selectors; actions are determined by the AI assistant at runtime. |
118-
| **Speed of Implementation** | Slower implementation due to the need for precise code translation for each action. | Rapid test creation using simple, plain text instructions for actions and assertions. |
119-
| **Handling Complex Scenarios** | Automating complex scenarios is challenging and prone to frequent failures. | Facilitates testing of complex scenarios by focusing on the intended test outcomes. |
120-
| **Test Writing Timing** | Can only write tests after the complete development of the functionality. | Enables a Test-Driven Development (TDD) approach, allowing test writing concurrent with or before functionality development. |
114+
| Aspect | Conventional Approach | Testing with Auto Playwright |
115+
| ------------------------------ | ----------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
116+
| **Coupling with Markup** | Strongly linked to the application's markup. | Eliminates the use of selectors; actions are determined by the AI assistant at runtime. |
117+
| **Speed of Implementation** | Slower implementation due to the need for precise code translation for each action. | Rapid test creation using simple, plain text instructions for actions and assertions. |
118+
| **Handling Complex Scenarios** | Automating complex scenarios is challenging and prone to frequent failures. | Facilitates testing of complex scenarios by focusing on the intended test outcomes. |
119+
| **Test Writing Timing** | Can only write tests after the complete development of the functionality. | Enables a Test-Driven Development (TDD) approach, allowing test writing concurrent with or before functionality development. |
121120
122121
## Supported Playwright Actions
123122
@@ -137,19 +136,107 @@ This library is free. However, there are costs associated with using OpenAI. You
137136
<details>
138137
<summary>Example</summary>
139138
140-
Using https://ray.run/ as an example, the cost of running a test step is approximately $0.01 using GPT-4 Turbo (and $0.001 using GPT-3.5 Turbo).
141-
142-
The low cost is in part because `auto-playwright` uses HTML sanitization to reduce the payload size, e.g. What follows is the payload that would be submitted for https://ray.run/.
143-
144-
Naturally, the price will vary dramatically depending on the payload.
139+
Using https://ray.run/ as an example, the cost of running a test step is approximately $0.01 using GPT-4 Turbo (and $0.001 using GPT-3.5 Turbo).
140+
141+
The low cost is in part because `auto-playwright` uses HTML sanitization to reduce the payload size, e.g. What follows is the payload that would be submitted for https://ray.run/.
142+
143+
Naturally, the price will vary dramatically depending on the payload.
144+
145+
```html
146+
<div class="cYdhWw dKnOgO geGbZz bGoBgk jkEels">
147+
<div class="kSmiQp fPSBzf bnYmbW dXscgu xJzwH jTWvec gzBMzy">
148+
<h1 class="fwYeZS fwlORb pdjVK bccLBY fsAQjR fyszFl WNJim fzozfU">
149+
Learn Playwright
150+
</h1>
151+
<h2 class="cakMWc ptfck bBmAxp hSiiri xJzwS gnfYng jTWvec fzozfU">
152+
Resources for learning end-to-end testing using Playwright automation
153+
framework
154+
</h2>
155+
<div
156+
class="bLTbYS gvHvKe cHEBuD ddgODW jsxhGC kdTEUJ ilCTXp iQHbtH yuxBn ilIXfy gPeiPq ivcdqp isDTsq jyZWmS ivdkBK cERSkX hdAwi ezvbLT jNrAaV jsxhGJ fzozCb"
157+
></div>
158+
</div>
159+
<div class="cYdhWw dpjphg cqUdSC fasMpP">
160+
<a
161+
class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group"
162+
href="/blog"
163+
><div class="plfYl bccLBY hSiiri fNBpvX">Blog</div>
164+
<div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu">
165+
<p>Learn in depth subjects about end-to-end testing.</p>
166+
</div></a
167+
><a
168+
class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group"
169+
href="/ask"
170+
><div class="plfYl bccLBY hSiiri fNBpvX">Ask AI</div>
171+
<div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu">
172+
<p>Ask ChatGPT Playwright questions.</p>
173+
</div></a
174+
><a
175+
class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group"
176+
href="/tools"
177+
><div class="plfYl bccLBY hSiiri fNBpvX">Dev Tools</div>
178+
<div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu">
179+
<p>All-in-one toolbox for QA engineers.</p>
180+
</div></a
181+
><a
182+
class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group"
183+
href="/jobs"
184+
><div class="plfYl bccLBY hSiiri fNBpvX">QA Jobs</div>
185+
<div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu">
186+
<p>Handpicked QA and Automation opportunities.</p>
187+
</div></a
188+
><a
189+
class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group"
190+
href="/questions"
191+
><div class="plfYl bccLBY hSiiri fNBpvX">Questions</div>
192+
<div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu">
193+
<p>Ask AI answered questions about Playwright.</p>
194+
</div></a
195+
><a
196+
class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group"
197+
href="/discord-forum"
198+
><div class="plfYl bccLBY hSiiri fNBpvX">Discord Forum</div>
199+
<div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu">
200+
<p>Archive of Discord Forum posts about Playwright.</p>
201+
</div></a
202+
><a
203+
class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group"
204+
href="/videos"
205+
><div class="plfYl bccLBY hSiiri fNBpvX">Videos</div>
206+
<div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu">
207+
<p>Tutorials, conference talks, and release videos.</p>
208+
</div></a
209+
><a
210+
class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group"
211+
href="/browser-extension"
212+
><div class="plfYl bccLBY hSiiri fNBpvX">Browser Extension</div>
213+
<div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu">
214+
<p>GUI for generating Playwright locators.</p>
215+
</div></a
216+
><a
217+
class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group"
218+
href="/wiki"
219+
><div class="plfYl bccLBY hSiiri fNBpvX">QA Wiki</div>
220+
<div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu">
221+
<p>Definitions of common end-to-end testing terms.</p>
222+
</div></a
223+
>
224+
</div>
225+
<div
226+
class="kSmiQp fPSBzf pKTba eTDpsp legDhJ hSiiri hdaZLM jTWvec gzBMzy bGySga fzoybr"
227+
>
228+
<p class="dXhlDK leOtqz glpWRZ fNCcFz">
229+
Use <kbd class="bWhrAL XAzZz cakMWc bUyOMB bmOrOm fyszFl dTmriP">⌘</kbd> +
230+
<kbd>k</kbd> + "Tools" to quickly access all tools.
231+
</p>
232+
</div>
233+
</div>
234+
```
145235
146-
```html
147-
<div class="cYdhWw dKnOgO geGbZz bGoBgk jkEels"><div class="kSmiQp fPSBzf bnYmbW dXscgu xJzwH jTWvec gzBMzy"><h1 class="fwYeZS fwlORb pdjVK bccLBY fsAQjR fyszFl WNJim fzozfU">Learn Playwright</h1><h2 class="cakMWc ptfck bBmAxp hSiiri xJzwS gnfYng jTWvec fzozfU">Resources for learning end-to-end testing using Playwright automation framework</h2><div class="bLTbYS gvHvKe cHEBuD ddgODW jsxhGC kdTEUJ ilCTXp iQHbtH yuxBn ilIXfy gPeiPq ivcdqp isDTsq jyZWmS ivdkBK cERSkX hdAwi ezvbLT jNrAaV jsxhGJ fzozCb"></div></div><div class="cYdhWw dpjphg cqUdSC fasMpP"><a class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group" href="/blog"><div class="plfYl bccLBY hSiiri fNBpvX">Blog</div><div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu"><p>Learn in depth subjects about end-to-end testing.</p></div></a><a class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group" href="/ask"><div class="plfYl bccLBY hSiiri fNBpvX">Ask AI</div><div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu"><p>Ask ChatGPT Playwright questions.</p></div></a><a class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group" href="/tools"><div class="plfYl bccLBY hSiiri fNBpvX">Dev Tools</div><div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu"><p>All-in-one toolbox for QA engineers.</p></div></a><a class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group" href="/jobs"><div class="plfYl bccLBY hSiiri fNBpvX">QA Jobs</div><div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu"><p>Handpicked QA and Automation opportunities.</p></div></a><a class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group" href="/questions"><div class="plfYl bccLBY hSiiri fNBpvX">Questions</div><div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu"><p>Ask AI answered questions about Playwright.</p></div></a><a class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group" href="/discord-forum"><div class="plfYl bccLBY hSiiri fNBpvX">Discord Forum</div><div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu"><p>Archive of Discord Forum posts about Playwright.</p></div></a><a class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group" href="/videos"><div class="plfYl bccLBY hSiiri fNBpvX">Videos</div><div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu"><p>Tutorials, conference talks, and release videos.</p></div></a><a class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group" href="/browser-extension"><div class="plfYl bccLBY hSiiri fNBpvX">Browser Extension</div><div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu"><p>GUI for generating Playwright locators.</p></div></a><a class="gacSWM dCgFix conipm knkqUc bddCnd dTKJOB leOtqz hEzNkW fNBBKe jTWvec fIMbrO fzozfU group" href="/wiki"><div class="plfYl bccLBY hSiiri fNBpvX">QA Wiki</div><div class="jqqjPD fWDXZB pKTba bBmAxp hSiiri evbPEu"><p>Definitions of common end-to-end testing terms.</p></div></a></div><div class="kSmiQp fPSBzf pKTba eTDpsp legDhJ hSiiri hdaZLM jTWvec gzBMzy bGySga fzoybr"><p class="dXhlDK leOtqz glpWRZ fNCcFz">Use <kbd class="bWhrAL XAzZz cakMWc bUyOMB bmOrOm fyszFl dTmriP">⌘</kbd> + <kbd>k</kbd> + "Tools" to quickly access all tools.</p></div></div>
148-
```
149236
</details>
150237
151238
## Implementation
152239
153240
### HTML Sanitization
154241
155-
The `auto` function uses [sanitize-html](https://www.npmjs.com/package/sanitize-html) to sanitize the HTML of the page before sending it to OpenAI. This is done to reduce cost and improve the quality of the generated text.
242+
The `auto` function uses [sanitize-html](https://www.npmjs.com/package/sanitize-html) to sanitize the HTML of the page before sending it to OpenAI. This is done to reduce cost and improve the quality of the generated text.

‎src/completeTask.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,8 @@ export const completeTask = async (
139139
return getLocator(args.elementId).inputValue();
140140
},
141141
name: "locator_inputValue",
142-
description: "Returns input.value for the selected <input> or <textarea> or <select> element.",
142+
description:
143+
"Returns input.value for the selected <input> or <textarea> or <select> element.",
143144
parse: (args: string) => {
144145
return z
145146
.object({
@@ -162,7 +163,7 @@ export const completeTask = async (
162163

163164
return {
164165
success: true,
165-
}
166+
};
166167
},
167168
name: "locator_fill",
168169
description: "Set a value to the input field.",

‎src/sanitizeHtml.ts

+7-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import sanitize from "sanitize-html";
22

33
export const sanitizeHtml = (subject: string) => {
44
return sanitize(subject, {
5-
allowedTags: sanitize.defaults.allowedTags.concat([ 'form', 'input', 'button' ]),
6-
allowedAttributes: false
5+
allowedTags: sanitize.defaults.allowedTags.concat([
6+
"form",
7+
"input",
8+
"button",
9+
]),
10+
allowedAttributes: false,
711
});
8-
};
12+
};

‎tests/auto.spec.ts

+10-2
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,17 @@ test("asserts (negative)", async ({ page }) => {
4444
test("executes query, action and assertion", async ({ page }) => {
4545
await page.goto("/");
4646

47-
const headerText = await auto("get the header text", { page, test }, {debug: true});
47+
const headerText = await auto(
48+
"get the header text",
49+
{ page, test },
50+
{ debug: true }
51+
);
4852

49-
await auto(`type "${headerText}" in the search box`, { page, test }, {debug: true});
53+
await auto(
54+
`type "${headerText}" in the search box`,
55+
{ page, test },
56+
{ debug: true }
57+
);
5058

5159
await page.pause();
5260

0 commit comments

Comments
 (0)