diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index fe2aba8d70a5..f7e056891142 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -802,6 +802,27 @@
"buttonHref": "https://on.cypress.io/viewport",
"infoText": "The viewport determines the width and height of your application under test. By default the viewport will be {0} by {1} for {2} testing.",
"configText": "Additionally, you can override this value in your {2} or via the {4} command."
+ },
+ "studio": {
+ "studio": "Studio",
+ "studioDescription": "Generate Cypress commands by interacting with your site as an end user would. Then, save these commands directly to your test file.",
+ "studioDetailedDescription": "Generate and save commands directly to your test suite by interacting with your app as an end user would. Right click on an element to add an assertion. Studio will track events that generate the following commands:",
+ "getStartedButton": "Get Started",
+ "feedbackPrompt": "Your {0} will be highly influential to our team.",
+ "experimentalMessage": "This feature is currently experimental and we will be adding more commands and abilities in the future.",
+ "feedbackLink": "feedback",
+ "saveTest": "Save Test",
+ "testName": "Test Name",
+ "saveTestButton": "Save",
+ "closeStudio": "Close Studio",
+ "restartStudio": "Restart Studio",
+ "copyCommands": "Copy Commands to Clipboard",
+ "commandsCopied": "Commands Copied!",
+ "availableCommands": "Available commands",
+ "giveFeedback": "Give Feedback",
+ "enterValidUrl": "Enter a valid URL to visit",
+ "continue": "Continue",
+ "actionCancel": "Cancel"
}
},
"warnings": {
diff --git a/packages/reporter/cypress/e2e/tests.cy.ts b/packages/reporter/cypress/e2e/tests.cy.ts
index c7d4f57b0cce..ef41559e1713 100644
--- a/packages/reporter/cypress/e2e/tests.cy.ts
+++ b/packages/reporter/cypress/e2e/tests.cy.ts
@@ -199,6 +199,10 @@ describe('studio controls', () => {
})
describe('button', () => {
+ beforeEach(() => {
+ runner.emit('reporter:start', { studioActive: false })
+ })
+
it('displays studio icon with half transparency when hovering over test title', { scrollBehavior: false }, () => {
cy.contains('test 1')
.closest('.runnable-wrapper')
diff --git a/packages/reporter/src/runnables/runnable-and-suite.tsx b/packages/reporter/src/runnables/runnable-and-suite.tsx
index 402aba8ed8a6..a36db2b61f1d 100644
--- a/packages/reporter/src/runnables/runnable-and-suite.tsx
+++ b/packages/reporter/src/runnables/runnable-and-suite.tsx
@@ -23,7 +23,7 @@ interface SuiteProps {
studioEnabled: boolean
}
-const Suite = observer(({ studioEnabled, eventManager = events, model }: SuiteProps) => {
+const Suite = observer(({ eventManager = events, model, studioEnabled }: SuiteProps) => {
const _launchStudio = (e: MouseEvent) => {
e.preventDefault()
e.stopPropagation()
@@ -34,7 +34,7 @@ const Suite = observer(({ studioEnabled, eventManager = events, model }: SuitePr
const _header = () => (
<>
{model.title}
- {studioEnabled && (
+ {(studioEnabled && !appState.studioActive) && (
diff --git a/packages/reporter/src/runnables/runnables.scss b/packages/reporter/src/runnables/runnables.scss
index f6dd542c5eee..09564917b901 100644
--- a/packages/reporter/src/runnables/runnables.scss
+++ b/packages/reporter/src/runnables/runnables.scss
@@ -179,7 +179,7 @@
&.runnable-studio.runnable-passed > div > .runnable-wrapper,
&.runnable-studio.runnable-passed > div > .runnable-instruments {
- border-left: 4px solid $indigo-700;
+ border-left: 4px solid $purple-400;
}
&.runnable-skipped > .runnable-wrapper {
@@ -243,7 +243,8 @@
&.wand-icon {
.icon-light {
- fill: $indigo-700;
+ fill: $purple-300;
+ stroke: $purple-300;
}
}
}
@@ -300,7 +301,7 @@
}
.runnable-controls-studio {
- color: $indigo-300;
+ color: $purple-300;
opacity: 0;
}
}
@@ -379,11 +380,12 @@
}
.studio-cancel {
- background-color: $gray-900;
- color: $gray-400;
+ color: rgba($white, 0.75);
+ cursor: pointer;
+ margin: 7px 0 0 5px;
&:hover {
- background-color: $gray-800;
+ text-decoration: underline;
}
}
diff --git a/packages/reporter/src/runnables/runnables.tsx b/packages/reporter/src/runnables/runnables.tsx
index e6625ae2d4fb..90a1b1fe833c 100644
--- a/packages/reporter/src/runnables/runnables.tsx
+++ b/packages/reporter/src/runnables/runnables.tsx
@@ -67,7 +67,7 @@ const RunnablesEmptyState = ({ spec, studioEnabled, eventManager = events }: Run
{studioEnabled && (
<>
Create test with Cypress Studio
- Use an interactive tool to author a test right here.
+ Use an interactive tool to author a test right here.
>
)}
>
diff --git a/packages/reporter/src/test/test.tsx b/packages/reporter/src/test/test.tsx
index 650a1608f3a6..8e651b333fce 100644
--- a/packages/reporter/src/test/test.tsx
+++ b/packages/reporter/src/test/test.tsx
@@ -71,7 +71,7 @@ class StudioControls extends Component
return (
-
+
Cancel
{
_controls () {
let controls: Array = []
- if (this.props.model.state) {
+ if (this.props.model.state === 'failed') {
controls.push(
@@ -193,7 +193,7 @@ class Test extends Component {
)
}
- if (this.props.studioEnabled) {
+ if (this.props.studioEnabled && !appState.studioActive) {
controls.push(
diff --git a/packages/server/lib/socket-e2e.ts b/packages/server/lib/socket-e2e.ts
index 8a41483f21f8..4927726b4e18 100644
--- a/packages/server/lib/socket-e2e.ts
+++ b/packages/server/lib/socket-e2e.ts
@@ -102,8 +102,7 @@ export class SocketE2E extends SocketBase {
})
socket.on('studio:init', (cb) => {
- studio.getStudioModalShown()
- .then(cb)
+ cb()
})
socket.on('studio:save', (saveInfo, cb) => {
diff --git a/packages/server/lib/studio.ts b/packages/server/lib/studio.ts
index db45682df3bf..f25820a5ab8c 100644
--- a/packages/server/lib/studio.ts
+++ b/packages/server/lib/studio.ts
@@ -15,13 +15,6 @@ class StudioSaveError extends Error {
}
}
-export const setStudioModalShown = () => {
- return savedState.create()
- .then((state) => {
- state.set({ showedStudioModal: true })
- })
-}
-
export const getStudioModalShown = () => {
return savedState.create()
.then((state) => state.get())
@@ -45,14 +38,11 @@ export const save = (saveInfo: SaveInfo) => {
return saveToFile()
.then((success) => {
- return setStudioModalShown()
- .then(() => {
- if (!success) {
- throw new StudioSaveError(isSuite)
- }
+ if (!success) {
+ throw new StudioSaveError(isSuite)
+ }
- return null
- })
+ return null
})
.catch((err) => {
return {