Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(studio): generate clear before type commands #15145

Merged
merged 7 commits into from
Feb 22, 2021
Merged

feat(studio): generate clear before type commands #15145

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d2030ec
feat(studio): issue clear before type commands
panzarino Feb 18, 2021
7f79ab2
update isolated runner tests for typing
panzarino Feb 18, 2021
54e7466
Update unit tests for recorder
panzarino Feb 18, 2021
a45c400
Update e2e studio tests
panzarino Feb 18, 2021
73fe76e
Merge branch 'develop' into issue-15023
panzarino Feb 18, 2021
057efb1
Clarify why events are recorded
panzarino Feb 19, 2021
434ebec
Merge branch 'develop' into issue-15023
panzarino Feb 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 45 additions & 44 deletions packages/driver/cypress/fixtures/studio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,49 +14,50 @@
<option value="1">1</option>
<option value="2">2</option>
</select>
<button class="interactive">changing button</button>
<button class="interactive">another changing button</button>
<button class="interactive">3rd changing button</button>
<button class="both">both</button>
<button class="both">another both</button>
<button class="mdown">click adds class removed by mousedown</button>
<button class="mdown">mdown</button>
<script>
const btn1 = document.getElementsByClassName('interactive')[0]
const btn2 = document.getElementsByClassName('interactive')[1]
const btn3 = document.getElementsByClassName('interactive')[2]

btn1.addEventListener('mouseover', function() {
btn1.classList.add('mouseover')
})

btn2.addEventListener('mouseenter', function() {
btn2.classList.add('mouseenter')
})

btn3.addEventListener('mousedown', function() {
btn3.classList.add('mousedown')
})

const both = document.getElementsByClassName('both')[0]

both.addEventListener('mouseover', function() {
both.classList.add('mouseover')
})

both.addEventListener('mousedown', function() {
both.classList.add('mousedown')
})

const mdown = document.getElementsByClassName('mdown')[0]

mdown.addEventListener('mousedown', function() {
mdown.classList.remove('clicked')
})

mdown.addEventListener('click', function() {
mdown.classList.add('clicked')
})
</script>
<button class="interactive">changing button</button>
<button class="interactive">another changing button</button>
<button class="interactive">3rd changing button</button>
<button class="both">both</button>
<button class="both">another both</button>
<button class="mdown">click adds class removed by mousedown</button>
<button class="mdown">mdown</button>
<input id="input-placeholder" type="text" value="placeholder" />
<script>
const btn1 = document.getElementsByClassName('interactive')[0]
const btn2 = document.getElementsByClassName('interactive')[1]
const btn3 = document.getElementsByClassName('interactive')[2]

btn1.addEventListener('mouseover', function() {
btn1.classList.add('mouseover')
})

btn2.addEventListener('mouseenter', function() {
btn2.classList.add('mouseenter')
})

btn3.addEventListener('mousedown', function() {
btn3.classList.add('mousedown')
})

const both = document.getElementsByClassName('both')[0]

both.addEventListener('mouseover', function() {
both.classList.add('mouseover')
})

both.addEventListener('mousedown', function() {
both.classList.add('mousedown')
})

const mdown = document.getElementsByClassName('mdown')[0]

mdown.addEventListener('mousedown', function() {
mdown.classList.remove('clicked')
})

mdown.addEventListener('click', function() {
mdown.classList.add('clicked')
})
</script>
</body>
</html>
112 changes: 109 additions & 3 deletions packages/runner/cypress/integration/studio.record.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,31 +114,137 @@ describe('studio record', () => {
})

context('type', () => {
it('records type event', () => {
it('records type event and inserts a clear command', () => {
runCypressStudio()
.then(() => {
getFrame().find('#input-text').type('this was typed')

verifyCommandLog(1, {
selector: '#input-text',
name: 'clear',
})

verifyCommandLog(2, {
selector: '#input-text',
name: 'type',
message: 'this was typed',
})
})
})

it('records special characters', () => {
it('records when the user presses enter', () => {
runCypressStudio()
.then(() => {
getFrame().find('#input-text').type('this was typed{enter}')

verifyCommandLog(1, {
verifyCommandLog(2, {
selector: '#input-text',
name: 'type',
message: 'this was typed{enter}',
})
})
})

it('always records enter at the end of input regardless of cursor location', () => {
runCypressStudio()
.then(() => {
getFrame().find('#input-text').type('this was typed{movetostart}{enter}')

verifyCommandLog(2, {
selector: '#input-text',
name: 'type',
message: 'this was typed{enter}',
})
})
})

it('records input value and excludes special keys that were typed', () => {
runCypressStudio()
.then(() => {
getFrame().find('#input-text').type('this was tyed{leftarrow}{leftarrow}p')

verifyCommandLog(2, {
selector: '#input-text',
name: 'type',
message: 'this was typed',
})
})
})

it('records input value and clears when same input is typed into multiple times', () => {
runCypressStudio()
.then(() => {
getFrame().find('#input-text').type('first typing')
getFrame().find('.btn').click()
getFrame().find('#input-text').type('{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}second')
getFrame().find('.btn').click()
getFrame().find('#input-text').type('{movetostart}start ')
getFrame().find('.btn').click()
getFrame().find('#input-text').type('{selectall}{backspace}my input')

verifyCommandLog(1, {
selector: '#input-text',
name: 'clear',
})

verifyCommandLog(2, {
selector: '#input-text',
name: 'type',
message: 'first typing',
})

verifyCommandLog(4, {
selector: '#input-text',
name: 'clear',
})

verifyCommandLog(5, {
selector: '#input-text',
name: 'type',
message: 'first second',
})

verifyCommandLog(7, {
selector: '#input-text',
name: 'clear',
})

verifyCommandLog(8, {
selector: '#input-text',
name: 'type',
message: 'start first second',
})

verifyCommandLog(10, {
selector: '#input-text',
name: 'clear',
})

verifyCommandLog(11, {
selector: '#input-text',
name: 'type',
message: 'my input',
})
})
})

it('records input value when typing over placeholder', () => {
runCypressStudio()
.then(() => {
getFrame().find('#input-placeholder').type('{backspace}{backspace}{leftarrow}{leftarrow}{leftarrow}{leftarrow}ment ')

verifyCommandLog(1, {
selector: '#input-placeholder',
name: 'clear',
})

verifyCommandLog(2, {
selector: '#input-placeholder',
name: 'type',
message: 'placement hold',
})
})
})
})

context('check and uncheck', () => {
Expand Down
Loading