add attribute name settings for capture data path

main/recorder/index.ts

@@ -454,9 +454,10 @@ class Recorder {
 			'launch-puppeteer',
 			async (
 				event: IpcMainEvent,
-				arg: { url: string; device: Device; flowKey: string; uuid: string }
+				arg: { url: string; device: Device; flowKey: string; uuid: string, dataAttrName?: string }
 			) => {
-				const { url, device, flowKey, uuid } = arg;
+				const { url, device, flowKey, uuid, dataAttrName } = arg;
+				PageHelper.setDataAttrName(dataAttrName);
 				const {
 					viewport: { width, height }
 				} = device;
@@ -521,8 +522,9 @@ class Recorder {
 	private handleSwitchToRecord(): void {
 		ipcMain.on(
 			'switch-puppeteer',
-			async (event: IpcMainEvent, arg: { storyName: string; flowName: string }) => {
-				const { storyName, flowName } = arg;
+			async (event: IpcMainEvent, arg: { storyName: string; flowName: string, dataAttrName?: string }) => {
+				const { storyName, flowName, dataAttrName } = arg;
+				PageHelper.setDataAttrName(dataAttrName);
 				const flowKey = this.generateKeyByString(storyName, flowName);
 				const replayer = this.getReplayer().abandon(storyName, flowName);
 				const browser = replayer.getBrowser();

main/recorder/page-helper.ts

@@ -27,8 +27,13 @@ const ignoredIdRegexps = [
 	/^react-select.+-.+$/
 ];
 const idShouldIgnore = (id: string): boolean => ignoredIdRegexps.some(regexp => regexp.test(id));
-
 export default class PageHelper {
+	private static dataAttrName: string | null | undefined = null;
+
+	public static setDataAttrName(dataAttrName?: string): void {
+		PageHelper.dataAttrName = dataAttrName;
+	}
+
 	private static async createCDPClient(page: Page): Promise<CDPSession> {
 		return await page.target().createCDPSession();
 	}
@@ -441,7 +446,7 @@ export default class PageHelper {
 				) {
 					console.log('xpath contains svg dom node.');
 					const newXpath = xpath.replace(/^(.*button.*)\/svg.*$/, '$1');
-					const newCssPaath = csspath.replace(/^(.*button.*)\s>\ssvg.*$/, '$1');
+					const newCssPath = csspath.replace(/^(.*button.*)\s>\ssvg.*$/, '$1');
 					console.log(`new xpath after svg cut-off is ${newXpath}.`);
 					if (newXpath !== xpath) {
 						// replaced
@@ -451,7 +456,7 @@ export default class PageHelper {
 						}
 						element = parent;
 						xpath = newXpath;
-						csspath = newCssPaath;
+						csspath = newCssPath;
 					}
 				}
 
@@ -804,6 +809,12 @@ export default class PageHelper {
 		if (onSwitchFromReplayToRecord) {
 			await page.evaluate(() => window.$lhOnSwitchFromReplayToRecord = true);
 		}
+		if (PageHelper.dataAttrName) {
+			await page.evaluate((dataAttrName: string) => window.$lhDataAttrName = dataAttrName, PageHelper.dataAttrName);
+		} else {
+			// clear when not given
+			await page.evaluate(() => window.$lhDataAttrName = null);
+		}
 		await page.evaluateOnNewDocument(god);
 		await page.evaluate(god);
 	}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "last-hit",
-	"version": "0.9.15",
+	"version": "0.9.16",
 	"description": "last hit on enterprise web",
 	"main": "runtime/main/index.js",
 	"scripts": {

renderer/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "last-hit-appearance",
-	"version": "0.9.14",
+	"version": "0.9.16",
 	"homepage": "./",
 	"dependencies": {
 		"@blueprintjs/core": "^3.17.2",

renderer/src/active/index.tsx

@@ -21,26 +21,26 @@ export class ActiveWorkspace {
 	}
 }
 
-let actived: ActiveWorkspace | null = null;
+let active: ActiveWorkspace | null = null;
 
 export const activeWorkspace = (
 	workspace: Workspace,
 	settings: WorkspaceSettings,
 	structure: WorkspaceStructure
 ): void => {
-	actived = new ActiveWorkspace(workspace, settings, structure);
+	active = new ActiveWorkspace(workspace, settings, structure);
 };
 
 export const getActiveWorkspace = (): ActiveWorkspace | null => {
-	return actived;
+	return active;
 };
 
 export const hasActiveWorkspace = (): boolean => {
-	return actived != null;
+	return active != null;
 };
 
-export const deactiveWorkspace = (): ActiveWorkspace | null => {
-	const previousActived = actived;
-	actived = null;
-	return previousActived;
+export const deactivateWorkspace = (): ActiveWorkspace | null => {
+	const previousActive = active;
+	active = null;
+	return previousActive;
 };

renderer/src/app.tsx

@@ -3,7 +3,7 @@ import { FocusStyleManager } from '@blueprintjs/core';
 import React from 'react';
 import { Redirect, Route, Router, Switch } from 'react-router-dom';
 import styled from 'styled-components';
-import { deactiveWorkspace, hasActiveWorkspace } from './active';
+import { deactivateWorkspace, hasActiveWorkspace } from './active';
 import UIContext, { context } from './common/context';
 import history from './common/history';
 import paths from './common/paths';
@@ -12,7 +12,7 @@ import { GlobalStyles } from './common/styles';
 FocusStyleManager.onlyShowFocusOnTabs();
 
 const Splash = React.lazy(() => import(/* webpackChunkName: "splash" */ './splash'));
-const CreateWorspace = React.lazy(() =>
+const CreateWorkspace = React.lazy(() =>
 	import(/* webpackChunkName: "create-workspace" */ './workspace/create')
 );
 const OpenedWorkspace = React.lazy(() =>
@@ -38,15 +38,15 @@ const App = () => {
 									if (hasActiveWorkspace()) {
 										return <OpenedWorkspace />;
 									} else {
-										// for ensure deactive
-										deactiveWorkspace();
+										// for ensure deactivate
+										deactivateWorkspace();
 										return <Redirect to={paths.SPLASH} />;
 									}
 								}}
 							/>
 							<Route
 								path={paths.CREATE_WORKSPACE}
-								render={() => <CreateWorspace />}
+								render={() => <CreateWorkspace />}
 							/>
 							<Route path={paths.SPLASH} render={() => <Splash />} />
 							<Route

renderer/src/common/context.tsx

@@ -30,6 +30,9 @@ export interface IUIEventEmitter {
 	emit(event: EventTypes.ASK_OPEN_ENV): boolean;
 	emit(event: EventTypes.CLOSE_ENV_DIALOG): boolean;
 
+	emit(event: EventTypes.ASK_OPEN_WORKSPACE_SETTINGS): boolean;
+	emit(event: EventTypes.CLOSE_WORKSPACE_SETTINGS_DIALOG): boolean;
+
 	emit(event: EventTypes.ASK_OPEN_UPDATE, current: string, latest: string): boolean;
 	emit(event: EventTypes.CLOSE_UPDATE_DIALOG): boolean;
 
@@ -122,6 +125,9 @@ export interface IUIEventEmitter {
 	on(event: EventTypes.ASK_OPEN_ENV, listener: NoArgListener): this;
 	on(event: EventTypes.CLOSE_ENV_DIALOG, listener: NoArgListener): this;
 
+	on(event: EventTypes.ASK_OPEN_WORKSPACE_SETTINGS, listener: NoArgListener): this;
+	on(event: EventTypes.CLOSE_WORKSPACE_SETTINGS_DIALOG, listener: NoArgListener): this;
+
 	on(
 		event: EventTypes.ASK_OPEN_UPDATE,
 		listener: (current: string, latest: string) => void
@@ -184,6 +190,9 @@ export interface IUIEventEmitter {
 	off(event: EventTypes.ASK_OPEN_ENV, listener: NoArgListener): this;
 	off(event: EventTypes.CLOSE_ENV_DIALOG, listener: NoArgListener): this;
 
+	off(event: EventTypes.ASK_OPEN_WORKSPACE_SETTINGS, listener: NoArgListener): this;
+	off(event: EventTypes.CLOSE_WORKSPACE_SETTINGS_DIALOG, listener: NoArgListener): this;
+
 	off(
 		event: EventTypes.ASK_OPEN_UPDATE,
 		listener: (current: string, latest: string) => void

renderer/src/events/index.tsx

@@ -5,6 +5,9 @@ export enum EventTypes {
 	ASK_OPEN_ENV = 'ask-open-env',
 	CLOSE_ENV_DIALOG = 'close-env-dialog',
 
+	ASK_OPEN_WORKSPACE_SETTINGS = 'ask-open-workspace-settings',
+	CLOSE_WORKSPACE_SETTINGS_DIALOG = 'close-workspace-settings-dialog',
+
 	ASK_OPEN_UPDATE = 'ask-open-update',
 	CLOSE_UPDATE_DIALOG = 'close-update-dialog',
 

renderer/src/files/workspace.tsx

@@ -3,7 +3,7 @@ import fs from 'fs';
 import jsonfile from 'jsonfile';
 import { Flow, Story } from 'last-hit-types';
 import path from 'path';
-import { activeWorkspace, deactiveWorkspace, getActiveWorkspace } from '../active';
+import { activeWorkspace, deactivateWorkspace, getActiveWorkspace } from '../active';
 import history from '../common/history';
 import IDESettings, { WorkspaceFileExt } from '../common/ide-settings';
 import paths from '../common/paths';
@@ -133,7 +133,7 @@ const loadWorkspaceStructure = (settings: WorkspaceSettings): WorkspaceStructure
 };
 
 export const closeCurrentWorkspace = (): void => {
-	deactiveWorkspace();
+	deactivateWorkspace();
 
 	history.replace(paths.ROOT);
 

renderer/src/types/index.tsx

@@ -10,6 +10,7 @@ export type ExecuteEnv = Environment;
 export type WorkspaceSettings = {
 	name: string;
 	workspaceFile: string;
+	dataAttrName?: string;
 	envs?: ExecuteEnv[];
 };
 

renderer/src/workspace/flow/record-dialog.tsx

@@ -4,6 +4,7 @@ import { Flow, StartStep, StepType, Story } from 'last-hit-types';
 import React from 'react';
 import styled from 'styled-components';
 import uuidv4 from 'uuid/v4';
+import { getActiveWorkspace } from '../../active';
 import UIContext from '../../common/context';
 import Devices from '../../common/device-descriptors';
 import { EventTypes } from '../../events';
@@ -26,7 +27,7 @@ const TheDialog = (props: {
 	};
 
 	// force render
-	const [ignored, forceUpdate] = React.useReducer(x => x + 1, 0);
+	const [ ignored, forceUpdate ] = React.useReducer(x => x + 1, 0);
 
 	const handleRecording = (): void => {
 		const flowKey = asFlowKey(flow, story);
@@ -110,9 +111,10 @@ const TheDialog = (props: {
 			const options = {
 				url: step.url,
 				device: step.device || Devices[0],
-				uuid: uuidv4()
+				uuid: uuidv4(),
+				dataAttrName: getActiveWorkspace()!.getSettings().dataAttrName
 			};
-			flow.steps = [{ type: 'start', stepIndex: 0, stepUuid: uuidv4(), ...options }];
+			flow.steps = [ { type: 'start', stepIndex: 0, stepUuid: uuidv4(), ...options } ];
 			emitter.emit(EventTypes.ASK_SAVE_FLOW, story, flow);
 			forceUpdate(ignored);
 			ipcRenderer.send('launch-puppeteer', {
@@ -121,7 +123,7 @@ const TheDialog = (props: {
 			});
 		}
 		// eslint-disable-next-line
-	}, [0]);
+	}, [ 0 ]);
 
 	const onCaptureScreenshotClicked = (): void => {
 		const flowKey = asFlowKey(flow, story);
@@ -191,12 +193,12 @@ const TheDialog = (props: {
 						#{flow.steps!.length} {getStepTypeText(flow.steps![flow.steps!.length - 1])}
 					</h4>
 				</div>
-				<div className="overlay-placeholder" />
+				<div className="overlay-placeholder"/>
 				<div className={Classes.DIALOG_FOOTER_ACTIONS}>
 					<Button onClick={onStopClicked} intent="danger">
 						Stop
 					</Button>
-					<Placeholder />
+					<Placeholder/>
 					<Button onClick={onCaptureScreenshotClicked} intent="primary">
 						Capture Screenshot
 					</Button>
@@ -212,7 +214,7 @@ const TheDialog = (props: {
 export default (): JSX.Element => {
 	const { emitter } = React.useContext(UIContext);
 
-	const [data, setData] = React.useState(
+	const [ data, setData ] = React.useState(
 		null as { story: Story; flow: Flow; isSwitchedFromReplay: boolean } | null
 	);
 	React.useEffect(() => {
@@ -233,6 +235,6 @@ export default (): JSX.Element => {
 	if (data != null) {
 		return <TheDialog {...data} />;
 	} else {
-		return <React.Fragment />;
+		return <React.Fragment/>;
 	}
 };

renderer/src/workspace/flow/replay-dialog.tsx

@@ -120,7 +120,11 @@ const ReplayDialog = (props: {
 				emitter.emit(EventTypes.ASK_FLOW_RECORD, story, flow, true);
 				close();
 			});
-			ipcRenderer.send('switch-puppeteer', { storyName: story.name, flowName: flow.name });
+			ipcRenderer.send('switch-puppeteer', {
+				storyName: story.name,
+				flowName: flow.name,
+				dataAttrName: getActiveWorkspace()!.getSettings().dataAttrName
+			});
 		});
 		ipcRenderer.send(`continue-replay-step-${flowKey}`, {
 			command: 'switch-to-record'

renderer/src/workspace/open/index.tsx

@@ -20,6 +20,7 @@ import StoryDelete from '../story/delete';
 import StoryRenameDialog from '../story/rename-dialog';
 import BottomBar from './bottom-bar';
 import EnvDialog from './env-dialog';
+import WorkspaceSettingsDialog from './workspace-settings-dialog'
 import MainContent from './main-content';
 import UpdateDialog from './update-dialog';
 
@@ -81,6 +82,7 @@ export default (): JSX.Element => {
 			<ScriptsHelperDrawer />
 			<StepSearchDrawer />
 			<EnvDialog />
+			<WorkspaceSettingsDialog />
 			<UpdateDialog />
 		</Container>
 	);

renderer/src/workspace/open/left-bar.tsx

@@ -65,7 +65,7 @@ export default () => {
 				.replace('v', '')
 				.split('.')
 				.map((x: string) => (x ? (x as any) * 1 : 0));
-			// console.log('latest veresion', major, minor, patch);
+			// console.log('latest version', major, minor, patch);
 			if (
 				myMajor < major ||
 				(myMajor === major && myMinor < minor) ||
@@ -83,7 +83,7 @@ export default () => {
 		checkUpdate();
 		// eslint-disable-next-line
 	}, [0]);
-	const onToggleNagivatorClicked = (): void => {
+	const onToggleNavigatorClicked = (): void => {
 		emitter.emit(EventTypes.ASK_TOGGLE_NAVIGATOR);
 	};
 	const onStepSearchClicked = (): void => {
@@ -92,6 +92,9 @@ export default () => {
 	const onEnvClicked = (): void => {
 		emitter.emit(EventTypes.ASK_OPEN_ENV);
 	};
+	const onWorkspaceSettingsClicked = () : void => {
+		emitter.emit(EventTypes.ASK_OPEN_WORKSPACE_SETTINGS);
+	}
 	const onUpdateClicked = (): void => {
 		if (update.has) {
 			setUpdate({ has: false, current: update.current, latest: update.latest });
@@ -107,7 +110,7 @@ export default () => {
 					minimal={true}
 					icon="inbox"
 					large={true}
-					onClick={onToggleNagivatorClicked}
+					onClick={onToggleNavigatorClicked}
 				/>
 			</Segment>
 			<Segment title="Step Search">
@@ -116,6 +119,9 @@ export default () => {
 			<Segment title="Environments">
 				<Button minimal={true} icon="heat-grid" large={true} onClick={onEnvClicked} />
 			</Segment>
+			<Segment title="Workspace Settings">
+				<Button minimal={true} icon="settings" large={true} onClick={onWorkspaceSettingsClicked} />
+			</Segment>
 			<Segment title="Update">
 				<UpdateButton
 					minimal={true}