@@ -81,23 +85,12 @@ function LastStepPanel({
{showActionsMode === ActionsMode.Code && (
-
+ setPreferredLibrary(val)}
+ value={displayedScriptType}
+ />
{
setCopyCodeConfirm(true);
setTimeout(() => {
@@ -120,7 +113,7 @@ function LastStepPanel({
@@ -135,6 +128,8 @@ function LastStepPanel({
}
const Popup = () => {
+ const [preferredLibrary, setPreferredLibrary] = usePreferredLibrary();
+
const [recordingTabId, setRecordingTabId] = useState
(null);
const [currentTabId, setCurrentTabId] = useState(null);
@@ -142,9 +137,7 @@ const Popup = () => {
const [isShowingLastTest, setIsShowingLastTest] = useState(false);
- const [showBetaCTA, setShowBetaCTA] = useState(
- localStorage.getItem('showBetaCta') !== 'false'
- );
+ const [showBetaCTA, setShowBetaCTA] = useState(false);
useEffect(() => {
localStorageGet(['recording', 'recordingTabId']).then(
@@ -175,6 +168,40 @@ const Popup = () => {
});
}, []);
+ // Sets Cypress as default library if we're in the Cypress test browser
+ useEffect(() => {
+ (async () => {
+ const currentTab = await getCurrentTab();
+ const tabId = currentTab.id;
+ if (tabId == undefined) {
+ return;
+ }
+ const isCypress = await isCypressBrowser(tabId);
+ if (isCypress) {
+ setPreferredLibrary(ScriptType.Cypress);
+ }
+ })();
+ }, []);
+
+ function getCypressAutFrame(tabId: number) {
+ return new Promise(
+ (resolve, reject) => {
+ chrome.webNavigation.getAllFrames({ tabId }, (frames) => {
+ const autFrame = frames?.filter((frame) => {
+ // Must be child of parent frame and not have "__cypress" in the url
+ return (
+ frame.parentFrameId === 0 && frame.url.indexOf('__cypress') === -1
+ );
+ })?.[0];
+ if (autFrame == null || autFrame.frameId == null) {
+ return reject(new Error('No AUT frame found'));
+ }
+ resolve(autFrame);
+ });
+ }
+ );
+ }
+
const onRecordNewTestClick = async () => {
onNewRecording();
@@ -185,12 +212,24 @@ const Popup = () => {
throw new Error('No tab id found');
}
- // Let everyone know we should be recording with this current tab
- // Clear out event buffer
- setStartRecordingStorage(tabId, currentTab.url || '');
+ const isCypress = await isCypressBrowser(tabId);
+ if (isCypress) {
+ const autFrame = await getCypressAutFrame(tabId);
+ if (autFrame == null) {
+ throw new Error('No AUT frame found');
+ }
+
+ const frameId = autFrame.frameId;
+ const frameUrl = autFrame.url;
- await executeCleanUp(tabId);
- await executeScript(tabId, 'contentScript.bundle.js');
+ setStartRecordingStorage(tabId, frameId, frameUrl);
+ await executeCleanUp(tabId, frameId);
+ await executeScript(tabId, frameId, 'contentScript.bundle.js');
+ } else {
+ setStartRecordingStorage(tabId, 0, currentTab.url || '');
+ await executeCleanUp(tabId, 0);
+ await executeScript(tabId, 0, 'contentScript.bundle.js');
+ }
window.close();
};
@@ -263,8 +302,8 @@ const Popup = () => {
}}
className="text-grey mt-6"
>
- Generate Playwright & Puppeteer scripts from your browser
- actions (ex. click, type, scroll).
+ Generate Cypress, Playwright & Puppeteer scripts from your
+ browser actions (ex. click, type, scroll).
+
{
- this.pushCodes(`await page.waitForSelector('text=${text}')`);
+ this.pushCodes(`await page.waitForSelector('text=${text}');`);
return this;
};
@@ -554,42 +554,42 @@ ${this.codes.join('')}
export class CypressScriptBuilder extends ScriptBuilder {
// Cypress automatically detects and waits for the page to finish loading
click = (selector: string, causesNavigation: boolean) => {
- this.pushCodes(`cy.get('${selector}').click()`);
+ this.pushCodes(`cy.get('${selector}').click();`);
return this;
};
hover = (selector: string, causesNavigation: boolean) => {
- this.pushCodes(`cy.get('${selector}').trigger('mouseover')`);
+ this.pushCodes(`cy.get('${selector}').trigger('mouseover');`);
return this;
};
load = (url: string) => {
- this.pushCodes(`cy.visit('${url}')`);
+ this.pushCodes(`cy.visit('${url}');`);
return this;
};
resize = (width: number, height: number) => {
- this.pushCodes(`cy.viewport(${width}, ${height})`);
+ this.pushCodes(`cy.viewport(${width}, ${height});`);
return this;
};
fill = (selector: string, value: string, causesNavigation: boolean) => {
- this.pushCodes(`cy.get('${selector}').type(${JSON.stringify(value)})`);
+ this.pushCodes(`cy.get('${selector}').type(${JSON.stringify(value)});`);
return this;
};
type = (selector: string, value: string, causesNavigation: boolean) => {
- this.pushCodes(`cy.get('${selector}').type(${JSON.stringify(value)})`);
+ this.pushCodes(`cy.get('${selector}').type(${JSON.stringify(value)});`);
return this;
};
select = (selector: string, option: string, causesNavigation: boolean) => {
- this.pushCodes(`cy.get('${selector}').select('${option}')`);
+ this.pushCodes(`cy.get('${selector}').select('${option}');`);
return this;
};
keydown = (selector: string, key: string, causesNavigation: boolean) => {
- this.pushCodes(`cy.get('${selector}').type('{${key}}')`);
+ this.pushCodes(`cy.get('${selector}').type('{${key}}');`);
return this;
};
@@ -602,25 +602,25 @@ export class CypressScriptBuilder extends ScriptBuilder {
this.pushCodes(
`cy.scrollTo(${Math.floor(pageXOffset ?? 0)}, ${Math.floor(
pageYOffset ?? 0
- )})`
+ )});`
);
return this;
};
fullScreenshot = () => {
- this.pushCodes(`cy.screenshot()`);
+ this.pushCodes(`cy.screenshot();`);
return this;
};
awaitText = (text: string) => {
- this.pushCodes(`cy.contains('${text}')`);
+ this.pushCodes(`cy.contains('${text}');`);
return this;
};
buildScript = () => {
return `it('Written with DeploySentinel Recorder', () => {${this.codes.join(
''
- )}})`;
+ )}});`;
};
}
diff --git a/src/pages/types/index.ts b/src/pages/types/index.ts
index dcfd332..e4d444e 100644
--- a/src/pages/types/index.ts
+++ b/src/pages/types/index.ts
@@ -3,6 +3,11 @@ export enum ActionsMode {
Code = 'code',
}
+export enum BarPosition {
+ Top = 'top',
+ Bottom = 'bottom',
+}
+
export enum ScriptType {
Puppeteer = 'puppeteer',
Playwright = 'playwright',
diff --git a/tests/builders.test.ts b/tests/builders.test.ts
index bd6e834..060fd5b 100644
--- a/tests/builders.test.ts
+++ b/tests/builders.test.ts
@@ -26,10 +26,10 @@ describe('Test builders', () => {
const output = builder
.pushComments('// hello-world')
- .pushCodes('cy.visit()')
+ .pushCodes('cy.visit();')
.buildScript();
expect(output).toBe(
- `it('Written with DeploySentinel Recorder', () => {\n // hello-world\n cy.visit()\n})`
+ `it('Written with DeploySentinel Recorder', () => {\n // hello-world\n cy.visit();\n});`
);
});
@@ -37,7 +37,7 @@ describe('Test builders', () => {
builder.click('selector', true);
expect(mockPushCodes).toHaveBeenNthCalledWith(
1,
- "cy.get('selector').click()"
+ "cy.get('selector').click();"
);
});
@@ -45,25 +45,25 @@ describe('Test builders', () => {
builder.hover('selector', true);
expect(mockPushCodes).toHaveBeenNthCalledWith(
1,
- "cy.get('selector').trigger('mouseover')"
+ "cy.get('selector').trigger('mouseover');"
);
});
test('load', () => {
builder.load('url');
- expect(mockPushCodes).toHaveBeenNthCalledWith(1, "cy.visit('url')");
+ expect(mockPushCodes).toHaveBeenNthCalledWith(1, "cy.visit('url');");
});
test('resize', () => {
builder.resize(1, 2);
- expect(mockPushCodes).toHaveBeenNthCalledWith(1, 'cy.viewport(1, 2)');
+ expect(mockPushCodes).toHaveBeenNthCalledWith(1, 'cy.viewport(1, 2);');
});
test('fill', () => {
builder.fill('selector', 'value', true);
expect(mockPushCodes).toHaveBeenNthCalledWith(
1,
- 'cy.get(\'selector\').type("value")'
+ 'cy.get(\'selector\').type("value");'
);
});
@@ -71,7 +71,7 @@ describe('Test builders', () => {
builder.type('selector', 'value', true);
expect(mockPushCodes).toHaveBeenNthCalledWith(
1,
- 'cy.get(\'selector\').type("value")'
+ 'cy.get(\'selector\').type("value");'
);
});
@@ -79,7 +79,7 @@ describe('Test builders', () => {
builder.select('selector', 'option', true);
expect(mockPushCodes).toHaveBeenNthCalledWith(
1,
- "cy.get('selector').select('option')"
+ "cy.get('selector').select('option');"
);
});
@@ -87,23 +87,23 @@ describe('Test builders', () => {
builder.keydown('selector', 'Enter', true);
expect(mockPushCodes).toHaveBeenNthCalledWith(
1,
- "cy.get('selector').type('{Enter}')"
+ "cy.get('selector').type('{Enter}');"
);
});
test('wheel', () => {
builder.wheel(5, 6, 1, 2);
- expect(mockPushCodes).toHaveBeenNthCalledWith(1, 'cy.scrollTo(1, 2)');
+ expect(mockPushCodes).toHaveBeenNthCalledWith(1, 'cy.scrollTo(1, 2);');
});
test('fullScreenshot', () => {
builder.fullScreenshot();
- expect(mockPushCodes).toHaveBeenNthCalledWith(1, 'cy.screenshot()');
+ expect(mockPushCodes).toHaveBeenNthCalledWith(1, 'cy.screenshot();');
});
test('awaitText', () => {
builder.awaitText('text');
- expect(mockPushCodes).toHaveBeenNthCalledWith(1, "cy.contains('text')");
+ expect(mockPushCodes).toHaveBeenNthCalledWith(1, "cy.contains('text');");
});
});
@@ -250,7 +250,7 @@ test('Written with DeploySentinel Recorder', async ({ page }) => {
test('awaitText', () => {
builder.awaitText('foo');
expect(builder.getLatestCode()).toBe(
- "\n await page.waitForSelector('text=foo')\n"
+ "\n await page.waitForSelector('text=foo');\n"
);
});
});