@stablyai/playwright-base 0.1.8-next.2 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +166 -227
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +1 -6
- package/dist/index.d.ts +1 -6
- package/dist/index.mjs +166 -227
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -67,7 +67,7 @@ var isObject = (value) => {
|
|
|
67
67
|
// src/ai/metadata.ts
|
|
68
68
|
var SDK_METADATA_HEADERS = {
|
|
69
69
|
"X-Client-Name": "stably-playwright-sdk-js",
|
|
70
|
-
"X-Client-Version": "0.1.8
|
|
70
|
+
"X-Client-Version": "0.1.8"
|
|
71
71
|
};
|
|
72
72
|
|
|
73
73
|
// src/ai/extract.ts
|
|
@@ -167,6 +167,9 @@ function createExtract(pageOrLocator) {
|
|
|
167
167
|
var createLocatorExtract = (locator) => createExtract(locator);
|
|
168
168
|
var createPageExtract = (page) => createExtract(page);
|
|
169
169
|
|
|
170
|
+
// src/playwright-augment/methods/agent.ts
|
|
171
|
+
var import_internal_playwright_test = require("@stablyai/internal-playwright-test");
|
|
172
|
+
|
|
170
173
|
// src/playwright-type-predicates.ts
|
|
171
174
|
function isPage(candidate) {
|
|
172
175
|
return typeof candidate === "object" && candidate !== null && typeof candidate.screenshot === "function" && typeof candidate.goto === "function";
|
|
@@ -493,165 +496,171 @@ function createAgentStub() {
|
|
|
493
496
|
newPageOpenedMsg = `opened new tab ${alias} (${page.url()})`;
|
|
494
497
|
};
|
|
495
498
|
browserContext.on("page", onNewPage);
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
499
|
+
return await import_internal_playwright_test.test.step(prompt, async () => {
|
|
500
|
+
try {
|
|
501
|
+
for (let i = 0; i < maxCycles; i++) {
|
|
502
|
+
if (agentMessage.shouldTerminate) {
|
|
503
|
+
break;
|
|
504
|
+
}
|
|
505
|
+
const screenshot = await takeStableScreenshot(activePage);
|
|
506
|
+
const response = await fetch(AGENT_ENDPOINT, {
|
|
507
|
+
method: "POST",
|
|
508
|
+
headers: {
|
|
509
|
+
...SDK_METADATA_HEADERS,
|
|
510
|
+
Authorization: `Bearer ${apiKey}`
|
|
511
|
+
},
|
|
512
|
+
body: constructAgentPayload({
|
|
513
|
+
sessionId,
|
|
514
|
+
message: agentMessage.message,
|
|
515
|
+
isError: agentMessage.isError,
|
|
516
|
+
screenshot,
|
|
517
|
+
tabManager,
|
|
518
|
+
activePage,
|
|
519
|
+
additionalContext: newPageOpenedMsg ? { newPageMessage: newPageOpenedMsg } : void 0
|
|
520
|
+
})
|
|
521
|
+
});
|
|
522
|
+
newPageOpenedMsg = void 0;
|
|
523
|
+
const responseJson = await response.json();
|
|
524
|
+
if (!response.ok) {
|
|
525
|
+
throw new Error(
|
|
526
|
+
`Agent call failed: ${JSON.stringify(responseJson)}`
|
|
527
|
+
);
|
|
528
|
+
}
|
|
529
|
+
const agentResponse = responseJson;
|
|
530
|
+
agentMessage = await (async () => {
|
|
531
|
+
try {
|
|
532
|
+
switch (agentResponse.action) {
|
|
533
|
+
case "key": {
|
|
534
|
+
const { text } = agentResponse;
|
|
535
|
+
if (text) {
|
|
536
|
+
await activePage.keyboard.press(text);
|
|
537
|
+
return { message: `pressed "${text}"` };
|
|
538
|
+
}
|
|
539
|
+
return { message: "pressed key" };
|
|
532
540
|
}
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
const entry = Array.from(tabManager.entries()).find(
|
|
597
|
-
([, alias]) => alias === agentResponse.tab_alias
|
|
598
|
-
);
|
|
599
|
-
const page = entry?.[0];
|
|
600
|
-
if (!page) {
|
|
601
|
-
throw new Error(
|
|
602
|
-
`Tab with alias ${agentResponse.tab_alias} not found`
|
|
541
|
+
case "type": {
|
|
542
|
+
const { text } = agentResponse;
|
|
543
|
+
await activePage.keyboard.type(text);
|
|
544
|
+
return { message: `typed "${text}"` };
|
|
545
|
+
}
|
|
546
|
+
case "mouse_move": {
|
|
547
|
+
const [x, y] = agentResponse.coordinate;
|
|
548
|
+
await activePage.mouse.move(x, y);
|
|
549
|
+
return { message: `mouse moved to [${x}, ${y}]` };
|
|
550
|
+
}
|
|
551
|
+
case "left_click": {
|
|
552
|
+
const [x, y] = agentResponse.coordinate;
|
|
553
|
+
await activePage.mouse.click(x, y);
|
|
554
|
+
return { message: `left click at [${x}, ${y}]` };
|
|
555
|
+
}
|
|
556
|
+
case "right_click": {
|
|
557
|
+
const [x, y] = agentResponse.coordinate;
|
|
558
|
+
await activePage.mouse.click(x, y, { button: "right" });
|
|
559
|
+
return { message: `right click at [${x}, ${y}]` };
|
|
560
|
+
}
|
|
561
|
+
case "double_click": {
|
|
562
|
+
const [x, y] = agentResponse.coordinate;
|
|
563
|
+
await activePage.mouse.dblclick(x, y);
|
|
564
|
+
return { message: `double click at [${x}, ${y}]` };
|
|
565
|
+
}
|
|
566
|
+
case "triple_click": {
|
|
567
|
+
const [x, y] = agentResponse.coordinate;
|
|
568
|
+
await activePage.mouse.click(x, y, { clickCount: 3 });
|
|
569
|
+
return { message: `triple click at [${x}, ${y}]` };
|
|
570
|
+
}
|
|
571
|
+
case "left_click_drag": {
|
|
572
|
+
const [startX, startY] = agentResponse.start_coordinate;
|
|
573
|
+
const [endX, endY] = agentResponse.coordinate;
|
|
574
|
+
await activePage.mouse.move(startX, startY);
|
|
575
|
+
await activePage.mouse.down();
|
|
576
|
+
await activePage.mouse.move(endX, endY);
|
|
577
|
+
await activePage.mouse.up();
|
|
578
|
+
return {
|
|
579
|
+
message: `dragged from [${startX}, ${startY}] to [${endX}, ${endY}]`
|
|
580
|
+
};
|
|
581
|
+
}
|
|
582
|
+
case "screenshot": {
|
|
583
|
+
await takeStableScreenshot(activePage);
|
|
584
|
+
return { message: "captured screenshot" };
|
|
585
|
+
}
|
|
586
|
+
case "wait": {
|
|
587
|
+
const waitMs = agentResponse.milliseconds ?? 3e3;
|
|
588
|
+
await activePage.waitForTimeout(waitMs);
|
|
589
|
+
return { message: `waited ${waitMs}ms` };
|
|
590
|
+
}
|
|
591
|
+
case "navigate_to_url": {
|
|
592
|
+
await activePage.goto(agentResponse.url);
|
|
593
|
+
return { message: `navigated to "${agentResponse.url}"` };
|
|
594
|
+
}
|
|
595
|
+
case "new_tab_url": {
|
|
596
|
+
const newPage = await browserContext.newPage();
|
|
597
|
+
await newPage.goto(agentResponse.url);
|
|
598
|
+
await newPage.waitForLoadState("domcontentloaded");
|
|
599
|
+
return { message: "opened new tab" };
|
|
600
|
+
}
|
|
601
|
+
case "switch_tab": {
|
|
602
|
+
const entry = Array.from(tabManager.entries()).find(
|
|
603
|
+
([, alias]) => alias === agentResponse.tab_alias
|
|
603
604
|
);
|
|
605
|
+
const page = entry?.[0];
|
|
606
|
+
if (!page) {
|
|
607
|
+
throw new Error(
|
|
608
|
+
`Tab with alias ${agentResponse.tab_alias} not found`
|
|
609
|
+
);
|
|
610
|
+
}
|
|
611
|
+
await page.bringToFront();
|
|
612
|
+
activePage = page;
|
|
613
|
+
return {
|
|
614
|
+
message: `switched to "${agentResponse.tab_alias}"`
|
|
615
|
+
};
|
|
604
616
|
}
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
617
|
+
case "scroll": {
|
|
618
|
+
const [x, y] = agentResponse.coordinate;
|
|
619
|
+
await activePage.mouse.move(x, y);
|
|
620
|
+
let deltaX = 0;
|
|
621
|
+
let deltaY = 0;
|
|
622
|
+
switch (agentResponse.scroll_direction) {
|
|
623
|
+
case "up":
|
|
624
|
+
deltaY = -agentResponse.scroll_amount;
|
|
625
|
+
break;
|
|
626
|
+
case "down":
|
|
627
|
+
deltaY = agentResponse.scroll_amount;
|
|
628
|
+
break;
|
|
629
|
+
case "left":
|
|
630
|
+
deltaX = -agentResponse.scroll_amount;
|
|
631
|
+
break;
|
|
632
|
+
case "right":
|
|
633
|
+
deltaX = agentResponse.scroll_amount;
|
|
634
|
+
break;
|
|
635
|
+
}
|
|
636
|
+
await activePage.mouse.wheel(deltaX, deltaY);
|
|
637
|
+
return {
|
|
638
|
+
message: `scrolled ${agentResponse.scroll_direction}`
|
|
639
|
+
};
|
|
640
|
+
}
|
|
641
|
+
case "navigate_back": {
|
|
642
|
+
const res = await activePage.goBack();
|
|
643
|
+
if (!res)
|
|
644
|
+
throw new Error("navigate_back failed: no history entry");
|
|
645
|
+
return { message: "navigated back" };
|
|
646
|
+
}
|
|
647
|
+
case "terminate_test": {
|
|
648
|
+
const { success, reason } = agentResponse;
|
|
649
|
+
finalSuccess = success;
|
|
650
|
+
return { message: reason, shouldTerminate: true };
|
|
627
651
|
}
|
|
628
|
-
await activePage.mouse.wheel(deltaX, deltaY);
|
|
629
|
-
return {
|
|
630
|
-
message: `scrolled ${agentResponse.scroll_direction}`
|
|
631
|
-
};
|
|
632
|
-
}
|
|
633
|
-
case "navigate_back": {
|
|
634
|
-
const res = await activePage.goBack();
|
|
635
|
-
if (!res)
|
|
636
|
-
throw new Error("navigate_back failed: no history entry");
|
|
637
|
-
return { message: "navigated back" };
|
|
638
|
-
}
|
|
639
|
-
case "terminate_test": {
|
|
640
|
-
const { success, reason } = agentResponse;
|
|
641
|
-
finalSuccess = success;
|
|
642
|
-
return { message: reason, shouldTerminate: true };
|
|
643
652
|
}
|
|
653
|
+
} catch (error) {
|
|
654
|
+
const message = error instanceof Error ? error.message : String(error);
|
|
655
|
+
return { message, isError: true };
|
|
644
656
|
}
|
|
645
|
-
}
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
})();
|
|
657
|
+
})();
|
|
658
|
+
}
|
|
659
|
+
} finally {
|
|
660
|
+
browserContext.off("page", onNewPage);
|
|
650
661
|
}
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
}
|
|
654
|
-
return { success: finalSuccess ?? false };
|
|
662
|
+
return { success: finalSuccess ?? false };
|
|
663
|
+
});
|
|
655
664
|
};
|
|
656
665
|
}
|
|
657
666
|
|
|
@@ -839,54 +848,8 @@ async function verifyPrompt({
|
|
|
839
848
|
);
|
|
840
849
|
}
|
|
841
850
|
|
|
842
|
-
// src/expect
|
|
843
|
-
|
|
844
|
-
var import_promises = require("fs/promises");
|
|
845
|
-
var import_path2 = require("path");
|
|
846
|
-
var import_fs = require("fs");
|
|
847
|
-
var import_internal_playwright_test = require("@stablyai/internal-playwright-test");
|
|
848
|
-
async function getCacheEntryPath(snapshotKey) {
|
|
849
|
-
const testDir = import_path.default.dirname(import_internal_playwright_test.test.info().file);
|
|
850
|
-
return import_path.default.join(testDir, snapshotKey);
|
|
851
|
-
}
|
|
852
|
-
async function tryUseCachedSnapshot({
|
|
853
|
-
currentSnapshot,
|
|
854
|
-
cachedSnapshotKey,
|
|
855
|
-
snapshotSimilarityThreshold
|
|
856
|
-
}) {
|
|
857
|
-
const cacheEntryPath = await getCacheEntryPath(cachedSnapshotKey);
|
|
858
|
-
try {
|
|
859
|
-
await (0, import_promises.access)(cacheEntryPath, import_fs.constants.F_OK);
|
|
860
|
-
} catch {
|
|
861
|
-
return { success: false, usedCachedSnapshot: false };
|
|
862
|
-
}
|
|
863
|
-
const cacheEntry = await (0, import_promises.readFile)(cacheEntryPath);
|
|
864
|
-
return {
|
|
865
|
-
success: imagesAreSimilar({
|
|
866
|
-
image1: cacheEntry,
|
|
867
|
-
image2: currentSnapshot,
|
|
868
|
-
threshold: snapshotSimilarityThreshold
|
|
869
|
-
}),
|
|
870
|
-
usedCachedSnapshot: true
|
|
871
|
-
};
|
|
872
|
-
}
|
|
873
|
-
async function updateCachedSnapshot({
|
|
874
|
-
snapshotKey,
|
|
875
|
-
snapshot
|
|
876
|
-
}) {
|
|
877
|
-
const cacheEntryPath = await getCacheEntryPath(snapshotKey);
|
|
878
|
-
try {
|
|
879
|
-
await (0, import_promises.mkdir)((0, import_path2.dirname)(cacheEntryPath), { recursive: true });
|
|
880
|
-
await (0, import_promises.writeFile)(cacheEntryPath, snapshot);
|
|
881
|
-
} catch (err) {
|
|
882
|
-
console.error("Error writing snapshot", err);
|
|
883
|
-
throw err;
|
|
884
|
-
}
|
|
885
|
-
}
|
|
886
|
-
|
|
887
|
-
// src/expect/expect.ts
|
|
888
|
-
var DEFAULT_SNAPSHOT_SIMILARITY_THRESHOLD = 0.02;
|
|
889
|
-
function createResultMessage({
|
|
851
|
+
// src/expect.ts
|
|
852
|
+
function createFailureMessage({
|
|
890
853
|
targetType,
|
|
891
854
|
condition,
|
|
892
855
|
didPass,
|
|
@@ -913,38 +876,14 @@ var stablyPlaywrightMatchers = {
|
|
|
913
876
|
}
|
|
914
877
|
const targetType = isPage(target) ? "page" : "locator";
|
|
915
878
|
const screenshot = await takeStableScreenshot(target, options);
|
|
916
|
-
const useCachedSnapshotResult = options?.cache ? await tryUseCachedSnapshot({
|
|
917
|
-
currentSnapshot: screenshot,
|
|
918
|
-
cachedSnapshotKey: options.cache.snapshotKey,
|
|
919
|
-
snapshotSimilarityThreshold: options?.threshold ?? DEFAULT_SNAPSHOT_SIMILARITY_THRESHOLD
|
|
920
|
-
}) : void 0;
|
|
921
|
-
if (useCachedSnapshotResult?.success) {
|
|
922
|
-
return {
|
|
923
|
-
pass: true,
|
|
924
|
-
message: () => createResultMessage({
|
|
925
|
-
targetType,
|
|
926
|
-
condition,
|
|
927
|
-
didPass: true,
|
|
928
|
-
reason: "Used cached snapshot to verify condition",
|
|
929
|
-
isNot: this.isNot
|
|
930
|
-
})
|
|
931
|
-
};
|
|
932
|
-
}
|
|
933
879
|
const verifyResult = await verifyPrompt({ prompt: condition, screenshot });
|
|
934
|
-
if (options?.cache && verifyResult.pass) {
|
|
935
|
-
await updateCachedSnapshot({
|
|
936
|
-
snapshotKey: options.cache.snapshotKey,
|
|
937
|
-
snapshot: screenshot
|
|
938
|
-
});
|
|
939
|
-
}
|
|
940
|
-
const snapshotUsageMessage = useCachedSnapshotResult ? `Attempted to use the cached snapshot to verify the condition, but ${useCachedSnapshotResult.usedCachedSnapshot ? "the snapshot did not match the current snapshot" : "no snapshot was found"}.` : void 0;
|
|
941
880
|
return {
|
|
942
881
|
pass: verifyResult.pass,
|
|
943
|
-
message: () =>
|
|
882
|
+
message: () => createFailureMessage({
|
|
944
883
|
targetType,
|
|
945
884
|
condition,
|
|
946
885
|
didPass: verifyResult.pass,
|
|
947
|
-
reason:
|
|
886
|
+
reason: verifyResult.reason,
|
|
948
887
|
isNot: this.isNot
|
|
949
888
|
})
|
|
950
889
|
};
|