Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Jose Aurelio do Carmo Ribeiro
PPE2BDD
Commits
890bf910
Commit
890bf910
authored
Feb 05, 2021
by
Jose Aurelio do Carmo Ribeiro
Browse files
Corrigindo path das features
parent
de8068a0
Changes
28
Hide whitespace changes
Inline
Side-by-side
.gitignore
0 → 100644
View file @
890bf910
node_modules
cypress.json
0 → 100644
View file @
890bf910
{}
cypress/fixtures/example.json
0 → 100644
View file @
890bf910
{
"name"
:
"Using fixtures to represent data"
,
"email"
:
"hello@cypress.io"
,
"body"
:
"Fixtures are a great way to mock data for responses to routes"
}
\ No newline at end of file
cypress/integration/examples/actions.spec.js
0 → 100644
View file @
890bf910
/// <reference types="cypress" />
context
(
'
Actions
'
,
()
=>
{
beforeEach
(()
=>
{
cy
.
visit
(
'
https://example.cypress.io/commands/actions
'
)
})
// https://on.cypress.io/interacting-with-elements
it
(
'
.type() - type into a DOM element
'
,
()
=>
{
// https://on.cypress.io/type
cy
.
get
(
'
.action-email
'
)
.
type
(
'
fake@email.com
'
).
should
(
'
have.value
'
,
'
fake@email.com
'
)
// .type() with special character sequences
.
type
(
'
{leftarrow}{rightarrow}{uparrow}{downarrow}
'
)
.
type
(
'
{del}{selectall}{backspace}
'
)
// .type() with key modifiers
.
type
(
'
{alt}{option}
'
)
//these are equivalent
.
type
(
'
{ctrl}{control}
'
)
//these are equivalent
.
type
(
'
{meta}{command}{cmd}
'
)
//these are equivalent
.
type
(
'
{shift}
'
)
// Delay each keypress by 0.1 sec
.
type
(
'
slow.typing@email.com
'
,
{
delay
:
100
})
.
should
(
'
have.value
'
,
'
slow.typing@email.com
'
)
cy
.
get
(
'
.action-disabled
'
)
// Ignore error checking prior to type
// like whether the input is visible or disabled
.
type
(
'
disabled error checking
'
,
{
force
:
true
})
.
should
(
'
have.value
'
,
'
disabled error checking
'
)
})
it
(
'
.focus() - focus on a DOM element
'
,
()
=>
{
// https://on.cypress.io/focus
cy
.
get
(
'
.action-focus
'
).
focus
()
.
should
(
'
have.class
'
,
'
focus
'
)
.
prev
().
should
(
'
have.attr
'
,
'
style
'
,
'
color: orange;
'
)
})
it
(
'
.blur() - blur off a DOM element
'
,
()
=>
{
// https://on.cypress.io/blur
cy
.
get
(
'
.action-blur
'
).
type
(
'
About to blur
'
).
blur
()
.
should
(
'
have.class
'
,
'
error
'
)
.
prev
().
should
(
'
have.attr
'
,
'
style
'
,
'
color: red;
'
)
})
it
(
'
.clear() - clears an input or textarea element
'
,
()
=>
{
// https://on.cypress.io/clear
cy
.
get
(
'
.action-clear
'
).
type
(
'
Clear this text
'
)
.
should
(
'
have.value
'
,
'
Clear this text
'
)
.
clear
()
.
should
(
'
have.value
'
,
''
)
})
it
(
'
.submit() - submit a form
'
,
()
=>
{
// https://on.cypress.io/submit
cy
.
get
(
'
.action-form
'
)
.
find
(
'
[type="text"]
'
).
type
(
'
HALFOFF
'
)
cy
.
get
(
'
.action-form
'
).
submit
()
.
next
().
should
(
'
contain
'
,
'
Your form has been submitted!
'
)
})
it
(
'
.click() - click on a DOM element
'
,
()
=>
{
// https://on.cypress.io/click
cy
.
get
(
'
.action-btn
'
).
click
()
// You can click on 9 specific positions of an element:
// -----------------------------------
// | topLeft top topRight |
// | |
// | |
// | |
// | left center right |
// | |
// | |
// | |
// | bottomLeft bottom bottomRight |
// -----------------------------------
// clicking in the center of the element is the default
cy
.
get
(
'
#action-canvas
'
).
click
()
cy
.
get
(
'
#action-canvas
'
).
click
(
'
topLeft
'
)
cy
.
get
(
'
#action-canvas
'
).
click
(
'
top
'
)
cy
.
get
(
'
#action-canvas
'
).
click
(
'
topRight
'
)
cy
.
get
(
'
#action-canvas
'
).
click
(
'
left
'
)
cy
.
get
(
'
#action-canvas
'
).
click
(
'
right
'
)
cy
.
get
(
'
#action-canvas
'
).
click
(
'
bottomLeft
'
)
cy
.
get
(
'
#action-canvas
'
).
click
(
'
bottom
'
)
cy
.
get
(
'
#action-canvas
'
).
click
(
'
bottomRight
'
)
// .click() accepts an x and y coordinate
// that controls where the click occurs :)
cy
.
get
(
'
#action-canvas
'
)
.
click
(
80
,
75
)
// click 80px on x coord and 75px on y coord
.
click
(
170
,
75
)
.
click
(
80
,
165
)
.
click
(
100
,
185
)
.
click
(
125
,
190
)
.
click
(
150
,
185
)
.
click
(
170
,
165
)
// click multiple elements by passing multiple: true
cy
.
get
(
'
.action-labels>.label
'
).
click
({
multiple
:
true
})
// Ignore error checking prior to clicking
cy
.
get
(
'
.action-opacity>.btn
'
).
click
({
force
:
true
})
})
it
(
'
.dblclick() - double click on a DOM element
'
,
()
=>
{
// https://on.cypress.io/dblclick
// Our app has a listener on 'dblclick' event in our 'scripts.js'
// that hides the div and shows an input on double click
cy
.
get
(
'
.action-div
'
).
dblclick
().
should
(
'
not.be.visible
'
)
cy
.
get
(
'
.action-input-hidden
'
).
should
(
'
be.visible
'
)
})
it
(
'
.rightclick() - right click on a DOM element
'
,
()
=>
{
// https://on.cypress.io/rightclick
// Our app has a listener on 'contextmenu' event in our 'scripts.js'
// that hides the div and shows an input on right click
cy
.
get
(
'
.rightclick-action-div
'
).
rightclick
().
should
(
'
not.be.visible
'
)
cy
.
get
(
'
.rightclick-action-input-hidden
'
).
should
(
'
be.visible
'
)
})
it
(
'
.check() - check a checkbox or radio element
'
,
()
=>
{
// https://on.cypress.io/check
// By default, .check() will check all
// matching checkbox or radio elements in succession, one after another
cy
.
get
(
'
.action-checkboxes [type="checkbox"]
'
).
not
(
'
[disabled]
'
)
.
check
().
should
(
'
be.checked
'
)
cy
.
get
(
'
.action-radios [type="radio"]
'
).
not
(
'
[disabled]
'
)
.
check
().
should
(
'
be.checked
'
)
// .check() accepts a value argument
cy
.
get
(
'
.action-radios [type="radio"]
'
)
.
check
(
'
radio1
'
).
should
(
'
be.checked
'
)
// .check() accepts an array of values
cy
.
get
(
'
.action-multiple-checkboxes [type="checkbox"]
'
)
.
check
([
'
checkbox1
'
,
'
checkbox2
'
]).
should
(
'
be.checked
'
)
// Ignore error checking prior to checking
cy
.
get
(
'
.action-checkboxes [disabled]
'
)
.
check
({
force
:
true
}).
should
(
'
be.checked
'
)
cy
.
get
(
'
.action-radios [type="radio"]
'
)
.
check
(
'
radio3
'
,
{
force
:
true
}).
should
(
'
be.checked
'
)
})
it
(
'
.uncheck() - uncheck a checkbox element
'
,
()
=>
{
// https://on.cypress.io/uncheck
// By default, .uncheck() will uncheck all matching
// checkbox elements in succession, one after another
cy
.
get
(
'
.action-check [type="checkbox"]
'
)
.
not
(
'
[disabled]
'
)
.
uncheck
().
should
(
'
not.be.checked
'
)
// .uncheck() accepts a value argument
cy
.
get
(
'
.action-check [type="checkbox"]
'
)
.
check
(
'
checkbox1
'
)
.
uncheck
(
'
checkbox1
'
).
should
(
'
not.be.checked
'
)
// .uncheck() accepts an array of values
cy
.
get
(
'
.action-check [type="checkbox"]
'
)
.
check
([
'
checkbox1
'
,
'
checkbox3
'
])
.
uncheck
([
'
checkbox1
'
,
'
checkbox3
'
]).
should
(
'
not.be.checked
'
)
// Ignore error checking prior to unchecking
cy
.
get
(
'
.action-check [disabled]
'
)
.
uncheck
({
force
:
true
}).
should
(
'
not.be.checked
'
)
})
it
(
'
.select() - select an option in a <select> element
'
,
()
=>
{
// https://on.cypress.io/select
// at first, no option should be selected
cy
.
get
(
'
.action-select
'
)
.
should
(
'
have.value
'
,
'
--Select a fruit--
'
)
// Select option(s) with matching text content
cy
.
get
(
'
.action-select
'
).
select
(
'
apples
'
)
// confirm the apples were selected
// note that each value starts with "fr-" in our HTML
cy
.
get
(
'
.action-select
'
).
should
(
'
have.value
'
,
'
fr-apples
'
)
cy
.
get
(
'
.action-select-multiple
'
)
.
select
([
'
apples
'
,
'
oranges
'
,
'
bananas
'
])
// when getting multiple values, invoke "val" method first
.
invoke
(
'
val
'
)
.
should
(
'
deep.equal
'
,
[
'
fr-apples
'
,
'
fr-oranges
'
,
'
fr-bananas
'
])
// Select option(s) with matching value
cy
.
get
(
'
.action-select
'
).
select
(
'
fr-bananas
'
)
// can attach an assertion right away to the element
.
should
(
'
have.value
'
,
'
fr-bananas
'
)
cy
.
get
(
'
.action-select-multiple
'
)
.
select
([
'
fr-apples
'
,
'
fr-oranges
'
,
'
fr-bananas
'
])
.
invoke
(
'
val
'
)
.
should
(
'
deep.equal
'
,
[
'
fr-apples
'
,
'
fr-oranges
'
,
'
fr-bananas
'
])
// assert the selected values include oranges
cy
.
get
(
'
.action-select-multiple
'
)
.
invoke
(
'
val
'
).
should
(
'
include
'
,
'
fr-oranges
'
)
})
it
(
'
.scrollIntoView() - scroll an element into view
'
,
()
=>
{
// https://on.cypress.io/scrollintoview
// normally all of these buttons are hidden,
// because they're not within
// the viewable area of their parent
// (we need to scroll to see them)
cy
.
get
(
'
#scroll-horizontal button
'
)
.
should
(
'
not.be.visible
'
)
// scroll the button into view, as if the user had scrolled
cy
.
get
(
'
#scroll-horizontal button
'
).
scrollIntoView
()
.
should
(
'
be.visible
'
)
cy
.
get
(
'
#scroll-vertical button
'
)
.
should
(
'
not.be.visible
'
)
// Cypress handles the scroll direction needed
cy
.
get
(
'
#scroll-vertical button
'
).
scrollIntoView
()
.
should
(
'
be.visible
'
)
cy
.
get
(
'
#scroll-both button
'
)
.
should
(
'
not.be.visible
'
)
// Cypress knows to scroll to the right and down
cy
.
get
(
'
#scroll-both button
'
).
scrollIntoView
()
.
should
(
'
be.visible
'
)
})
it
(
'
.trigger() - trigger an event on a DOM element
'
,
()
=>
{
// https://on.cypress.io/trigger
// To interact with a range input (slider)
// we need to set its value & trigger the
// event to signal it changed
// Here, we invoke jQuery's val() method to set
// the value and trigger the 'change' event
cy
.
get
(
'
.trigger-input-range
'
)
.
invoke
(
'
val
'
,
25
)
.
trigger
(
'
change
'
)
.
get
(
'
input[type=range]
'
).
siblings
(
'
p
'
)
.
should
(
'
have.text
'
,
'
25
'
)
})
it
(
'
cy.scrollTo() - scroll the window or element to a position
'
,
()
=>
{
// https://on.cypress.io/scrollto
// You can scroll to 9 specific positions of an element:
// -----------------------------------
// | topLeft top topRight |
// | |
// | |
// | |
// | left center right |
// | |
// | |
// | |
// | bottomLeft bottom bottomRight |
// -----------------------------------
// if you chain .scrollTo() off of cy, we will
// scroll the entire window
cy
.
scrollTo
(
'
bottom
'
)
cy
.
get
(
'
#scrollable-horizontal
'
).
scrollTo
(
'
right
'
)
// or you can scroll to a specific coordinate:
// (x axis, y axis) in pixels
cy
.
get
(
'
#scrollable-vertical
'
).
scrollTo
(
250
,
250
)
// or you can scroll to a specific percentage
// of the (width, height) of the element
cy
.
get
(
'
#scrollable-both
'
).
scrollTo
(
'
75%
'
,
'
25%
'
)
// control the easing of the scroll (default is 'swing')
cy
.
get
(
'
#scrollable-vertical
'
).
scrollTo
(
'
center
'
,
{
easing
:
'
linear
'
})
// control the duration of the scroll (in ms)
cy
.
get
(
'
#scrollable-both
'
).
scrollTo
(
'
center
'
,
{
duration
:
2000
})
})
})
cypress/integration/examples/aliasing.spec.js
0 → 100644
View file @
890bf910
/// <reference types="cypress" />
context
(
'
Aliasing
'
,
()
=>
{
beforeEach
(()
=>
{
cy
.
visit
(
'
https://example.cypress.io/commands/aliasing
'
)
})
it
(
'
.as() - alias a DOM element for later use
'
,
()
=>
{
// https://on.cypress.io/as
// Alias a DOM element for use later
// We don't have to traverse to the element
// later in our code, we reference it with @
cy
.
get
(
'
.as-table
'
).
find
(
'
tbody>tr
'
)
.
first
().
find
(
'
td
'
).
first
()
.
find
(
'
button
'
).
as
(
'
firstBtn
'
)
// when we reference the alias, we place an
// @ in front of its name
cy
.
get
(
'
@firstBtn
'
).
click
()
cy
.
get
(
'
@firstBtn
'
)
.
should
(
'
have.class
'
,
'
btn-success
'
)
.
and
(
'
contain
'
,
'
Changed
'
)
})
it
(
'
.as() - alias a route for later use
'
,
()
=>
{
// Alias the route to wait for its response
cy
.
intercept
(
'
GET
'
,
'
**/comments/*
'
).
as
(
'
getComment
'
)
// we have code that gets a comment when
// the button is clicked in scripts.js
cy
.
get
(
'
.network-btn
'
).
click
()
// https://on.cypress.io/wait
cy
.
wait
(
'
@getComment
'
).
its
(
'
response.statusCode
'
).
should
(
'
eq
'
,
200
)
})
})
cypress/integration/examples/assertions.spec.js
0 → 100644
View file @
890bf910
/// <reference types="cypress" />
context
(
'
Assertions
'
,
()
=>
{
beforeEach
(()
=>
{
cy
.
visit
(
'
https://example.cypress.io/commands/assertions
'
)
})
describe
(
'
Implicit Assertions
'
,
()
=>
{
it
(
'
.should() - make an assertion about the current subject
'
,
()
=>
{
// https://on.cypress.io/should
cy
.
get
(
'
.assertion-table
'
)
.
find
(
'
tbody tr:last
'
)
.
should
(
'
have.class
'
,
'
success
'
)
.
find
(
'
td
'
)
.
first
()
// checking the text of the <td> element in various ways
.
should
(
'
have.text
'
,
'
Column content
'
)
.
should
(
'
contain
'
,
'
Column content
'
)
.
should
(
'
have.html
'
,
'
Column content
'
)
// chai-jquery uses "is()" to check if element matches selector
.
should
(
'
match
'
,
'
td
'
)
// to match text content against a regular expression
// first need to invoke jQuery method text()
// and then match using regular expression
.
invoke
(
'
text
'
)
.
should
(
'
match
'
,
/column content/i
)
// a better way to check element's text content against a regular expression
// is to use "cy.contains"
// https://on.cypress.io/contains
cy
.
get
(
'
.assertion-table
'
)
.
find
(
'
tbody tr:last
'
)
// finds first <td> element with text content matching regular expression
.
contains
(
'
td
'
,
/column content/i
)
.
should
(
'
be.visible
'
)
// for more information about asserting element's text
// see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
})
it
(
'
.and() - chain multiple assertions together
'
,
()
=>
{
// https://on.cypress.io/and
cy
.
get
(
'
.assertions-link
'
)
.
should
(
'
have.class
'
,
'
active
'
)
.
and
(
'
have.attr
'
,
'
href
'
)
.
and
(
'
include
'
,
'
cypress.io
'
)
})
})
describe
(
'
Explicit Assertions
'
,
()
=>
{
// https://on.cypress.io/assertions
it
(
'
expect - make an assertion about a specified subject
'
,
()
=>
{
// We can use Chai's BDD style assertions
expect
(
true
).
to
.
be
.
true
const
o
=
{
foo
:
'
bar
'
}
expect
(
o
).
to
.
equal
(
o
)
expect
(
o
).
to
.
deep
.
equal
({
foo
:
'
bar
'
})
// matching text using regular expression
expect
(
'
FooBar
'
).
to
.
match
(
/bar$/i
)
})
it
(
'
pass your own callback function to should()
'
,
()
=>
{
// Pass a function to should that can have any number
// of explicit assertions within it.
// The ".should(cb)" function will be retried
// automatically until it passes all your explicit assertions or times out.
cy
.
get
(
'
.assertions-p
'
)
.
find
(
'
p
'
)
.
should
((
$p
)
=>
{
// https://on.cypress.io/$
// return an array of texts from all of the p's
// @ts-ignore TS6133 unused variable
const
texts
=
$p
.
map
((
i
,
el
)
=>
Cypress
.
$
(
el
).
text
())
// jquery map returns jquery object
// and .get() convert this to simple array
const
paragraphs
=
texts
.
get
()
// array should have length of 3
expect
(
paragraphs
,
'
has 3 paragraphs
'
).
to
.
have
.
length
(
3
)
// use second argument to expect(...) to provide clear
// message with each assertion
expect
(
paragraphs
,
'
has expected text in each paragraph
'
).
to
.
deep
.
eq
([
'
Some text from first p
'
,
'
More text from second p
'
,
'
And even more text from third p
'
,
])
})
})
it
(
'
finds element by class name regex
'
,
()
=>
{
cy
.
get
(
'
.docs-header
'
)
.
find
(
'
div
'
)
// .should(cb) callback function will be retried
.
should
((
$div
)
=>
{
expect
(
$div
).
to
.
have
.
length
(
1
)
const
className
=
$div
[
0
].
className
expect
(
className
).
to
.
match
(
/heading-/
)
})
// .then(cb) callback is not retried,
// it either passes or fails
.
then
((
$div
)
=>
{
expect
(
$div
,
'
text content
'
).
to
.
have
.
text
(
'
Introduction
'
)
})
})
it
(
'
can throw any error
'
,
()
=>
{
cy
.
get
(
'
.docs-header
'
)
.
find
(
'
div
'
)
.
should
((
$div
)
=>
{
if
(
$div
.
length
!==
1
)
{
// you can throw your own errors
throw
new
Error
(
'
Did not find 1 element
'
)
}
const
className
=
$div
[
0
].
className
if
(
!
className
.
match
(
/heading-/
))
{
throw
new
Error
(
`Could not find class "heading-" in
${
className
}
`
)
}
})
})
it
(
'
matches unknown text between two elements
'
,
()
=>
{
/**
* Text from the first element.
* @type {string}
*/
let
text
/**
* Normalizes passed text,
* useful before comparing text with spaces and different capitalization.
* @param {string} s Text to normalize
*/
const
normalizeText
=
(
s
)
=>
s
.
replace
(
/
\s
/g
,
''
).
toLowerCase
()
cy
.
get
(
'
.two-elements
'
)
.
find
(
'
.first
'
)
.
then
((
$first
)
=>
{
// save text from the first element
text
=
normalizeText
(
$first
.
text
())
})
cy
.
get
(
'
.two-elements
'
)
.
find
(
'
.second
'
)
.
should
((
$div
)
=>
{
// we can massage text before comparing
const
secondText
=
normalizeText
(
$div
.
text
())
expect
(
secondText
,
'
second text
'
).
to
.
equal
(
text
)
})
})
it
(
'
assert - assert shape of an object
'
,
()
=>
{
const
person
=
{
name
:
'
Joe
'
,
age
:
20
,
}
assert
.
isObject
(
person
,
'
value is object
'
)
})
it
(
'
retries the should callback until assertions pass
'
,
()
=>
{
cy
.
get
(
'
#random-number
'
)
.
should
((
$div
)
=>
{
const
n
=
parseFloat
(
$div
.
text
())
expect
(
n
).
to
.
be
.
gte
(
1
).
and
.
be
.
lte
(
10
)
})
})
})
})
cypress/integration/examples/connectors.spec.js
0 → 100644
View file @
890bf910
/// <reference types="cypress" />
context
(
'
Connectors
'
,
()
=>
{
beforeEach
(()
=>
{
cy
.
visit
(
'
https://example.cypress.io/commands/connectors
'
)
})
it
(
'
.each() - iterate over an array of elements
'
,
()
=>
{
// https://on.cypress.io/each
cy
.
get
(
'
.connectors-each-ul>li
'
)
.
each
((
$el
,
index
,
$list
)
=>
{
console
.
log
(
$el
,
index
,
$list
)
})
})
it
(
'
.its() - get properties on the current subject
'
,
()
=>
{
// https://on.cypress.io/its
cy
.
get
(
'
.connectors-its-ul>li
'
)
// calls the 'length' property yielding that value
.
its
(
'
length
'
)
.
should
(
'
be.gt
'
,
2
)
})
it
(
'
.invoke() - invoke a function on the current subject
'
,
()
=>
{
// our div is hidden in our script.js
// $('.connectors-div').hide()
// https://on.cypress.io/invoke
cy
.
get
(
'
.connectors-div
'
).
should
(
'
be.hidden
'
)
// call the jquery method 'show' on the 'div.container'
.
invoke
(
'
show
'
)
.
should
(
'
be.visible
'
)
})
it
(
'
.spread() - spread an array as individual args to callback function
'
,
()
=>
{
// https://on.cypress.io/spread
const
arr
=
[
'
foo
'
,
'
bar
'
,
'
baz
'
]
cy
.
wrap
(
arr
).
spread
((
foo
,
bar
,
baz
)
=>
{
expect
(
foo
).
to
.
eq
(
'
foo
'
)
expect
(
bar
).
to
.
eq
(
'
bar
'
)
expect
(
baz
).
to
.
eq
(
'
baz
'
)
})
})
describe
(
'
.then()
'
,
()
=>
{
it
(
'
invokes a callback function with the current subject
'
,
()
=>
{
// https://on.cypress.io/then
cy
.
get
(
'
.connectors-list > li
'
)
.
then
((
$lis
)
=>
{
expect
(
$lis
,
'
3 items
'
).
to
.
have
.
length
(
3
)
expect
(
$lis
.
eq
(
0
),
'
first item
'
).
to
.
contain
(
'
Walk the dog
'
)
expect
(
$lis
.
eq
(
1
),
'
second item
'
).
to
.
contain
(
'
Feed the cat
'
)
expect
(
$lis
.
eq
(
2
),
'
third item
'
).
to
.
contain
(
'
Write JavaScript
'
)
})