Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit d406018

Browse files
chrisbreidingbrian-mann
chrisbreiding
authored and
brian-mann
committed
Add selector playground to runner (cypress-io#1079)
* runner: display css selector helper and highlight on hover * runner: use unique-selector lib * runner: eslint auto-fixes * upgrade zunder to 5.5.1 and update configs * reporter: add babel deps * runner/reporter: lock react to 15.6.2 * runner: add highlight w/ tooltip and copy-to-clipboard * runner/reporter: upgrade react-tooltip to 0.3.1 * server: upgrade browserify-preprocessor to 1.0.2 * cli: eslint auto-fixes * upgrade zunder to 5.5.2 * runner: add defensive style resets to selector helper highlight * runner: ensure iframe contents exist before acting on them * runner: hide selector helper button when tests are loading or running * runner: use shadow dom for selector helper highlight * runner: reset state when selector helper is disabled * runner: rebind selector helper when snapshot changes * runner: don’t show tooltip when hovering over selector * runner: integrate playground input into selector helper * runner: fix mouseover/mouseout for selector * runner: fix selector clearing * runner: allow selector area to scroll * runner: enable switching between get and contains * runner: refactor method * runner: add tooltip to selector helper toggle * runner: focus selector helper input when method changes * runner: remove references to cypressEnv * runner: keep selector even if snapshot changes * runner: persist selector helper state instead of clearing it when things change * runner: hide method picker when clicking outside of it * runner: pass model into selector helper * CSS style changes to selector helper - merge in changes + fix conflicts * update close icon to not be so bold * runner: keep selector helper styles out of main runner styles * runner: rename playgroundInfo to info * runner: simplify selector helper model * driver: restrict more nodes from contains selector * runner: cleanup * runner: move selector helper to top * more style updates for selector-helper * move arrow to left of cy. * Added a 'print to console' button * runner: use fork of unique-selector and accept attribute selectors * runner: implement print to console * runner: close selector helper when re-running tests * runner: improve header responsive design * reporter: shorten console print message and lengthen duration shown * more styling for css selector panel. * style changes off of conversation * updated main dropdown button * update colors of input on invalid / no elements to be red * disable copy to clipboard & print to console buttons if invalid / no elements * style disabled clipboard & print buttons * update tooltip on click of 'print to console' to say 'printed!' * runner: refactor header to use mobx state * add link to docs help to selector playground * runner: add tests for header * runner: use the right button * runner: add tests for selector helper * runner: remove unused variable * runner: focus and select input when selector helper enabled or method changed * runner: hide tooltip when selector helper is open * runner: keep highlight from playground unless hovering over aut * runner: always show selector helper info * runner: show highlight when hovering over info * Update SelectorHelper name from old Footer * move 'selector highlight' behavior into 'highlight button' * Added tooltip to 'highlight' button. * runner: some style changes to selector-helper * runner: do not focus and select input when 'turning off inspect mode' * runner: fix issue w/ 'close' button on helper not working. * runner: use Cypress methods for printing elements to console. bring console messages into parity with driver * driver: revert experimental change to contains * reporter: fix failing tests * runner: fix failing tests
1 parent a559801 commit d406018

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1685
-283
lines changed

‎cli/lib/tasks/download.js‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -89,47 +89,47 @@ const downloadFromUrl = (options) => {
8989
progress(req, {
9090
throttle: options.throttle,
9191
})
92-
.on('response', (response) => {
93-
// start counting now once we've gotten
94-
// response headers
95-
started = new Date()
92+
.on('response', (response) => {
93+
// start counting now once we've gotten
94+
// response headers
95+
started = new Date()
9696

97-
// if our status code does not start with 200
98-
if (!/^2/.test(response.statusCode)) {
99-
debug('response code %d', response.statusCode)
97+
// if our status code does not start with 200
98+
if (!/^2/.test(response.statusCode)) {
99+
debug('response code %d', response.statusCode)
100100

101-
const err = new Error(
102-
stripIndent`
101+
const err = new Error(
102+
stripIndent`
103103
Failed downloading the Cypress binary.
104104
Response code: ${response.statusCode}
105105
Response message: ${response.statusMessage}
106106
`
107-
)
107+
)
108108

109-
reject(err)
110-
}
111-
})
112-
.on('error', reject)
113-
.on('progress', (state) => {
114-
// total time we've elapsed
115-
// starting on our first progress notification
116-
const elapsed = new Date() - started
109+
reject(err)
110+
}
111+
})
112+
.on('error', reject)
113+
.on('progress', (state) => {
114+
// total time we've elapsed
115+
// starting on our first progress notification
116+
const elapsed = new Date() - started
117117

118-
const eta = util.calculateEta(state.percent, elapsed)
118+
const eta = util.calculateEta(state.percent, elapsed)
119119

120-
// send up our percent and seconds remaining
121-
options.onProgress(state.percent, util.secsRemaining(eta))
122-
})
123-
// save this download here
124-
.pipe(fs.createWriteStream(options.downloadDestination))
125-
.on('finish', () => {
126-
debug('downloading finished')
127-
128-
resolve({
129-
filename: options.downloadDestination,
130-
downloaded: true,
131-
})
120+
// send up our percent and seconds remaining
121+
options.onProgress(state.percent, util.secsRemaining(eta))
122+
})
123+
// save this download here
124+
.pipe(fs.createWriteStream(options.downloadDestination))
125+
.on('finish', () => {
126+
debug('downloading finished')
127+
128+
resolve({
129+
filename: options.downloadDestination,
130+
downloaded: true,
132131
})
132+
})
133133
})
134134
}
135135

@@ -181,13 +181,13 @@ const start = (options) => {
181181

182182
// make sure our 'dist' installation dir exists
183183
return info
184-
.ensureInstallationDir()
185-
.then(() => {
186-
return download(options)
187-
})
188-
.catch((err) => {
189-
return prettyDownloadErr(err, options.version)
190-
})
184+
.ensureInstallationDir()
185+
.then(() => {
186+
return download(options)
187+
})
188+
.catch((err) => {
189+
return prettyDownloadErr(err, options.version)
190+
})
191191
}
192192

193193
module.exports = {

‎cli/test/lib/tasks/download_spec.js‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -66,16 +66,16 @@ describe('download', function () {
6666

6767
it('sets options.version to response x-version', function () {
6868
nock('https://aws.amazon.com')
69-
.get('/some.zip')
70-
.reply(200, () => fs.createReadStream('test/fixture/example.zip'))
69+
.get('/some.zip')
70+
.reply(200, () => fs.createReadStream('test/fixture/example.zip'))
7171

7272
nock('https://download.cypress.io')
73-
.get('/desktop')
74-
.query(true)
75-
.reply(302, undefined, {
76-
Location: 'https://aws.amazon.com/some.zip',
77-
'x-version': '0.11.1',
78-
})
73+
.get('/desktop')
74+
.query(true)
75+
.reply(302, undefined, {
76+
Location: 'https://aws.amazon.com/some.zip',
77+
'x-version': '0.11.1',
78+
})
7979

8080
return download.start(this.options).then(() => {
8181
expect(this.options.version).to.eq('0.11.1')
@@ -86,16 +86,16 @@ describe('download', function () {
8686
this.options.version = '0.13.0'
8787

8888
nock('https://aws.amazon.com')
89-
.get('/some.zip')
90-
.reply(200, () => fs.createReadStream('test/fixture/example.zip'))
89+
.get('/some.zip')
90+
.reply(200, () => fs.createReadStream('test/fixture/example.zip'))
9191

9292
nock('https://download.cypress.io')
93-
.get('/desktop/0.13.0')
94-
.query(true)
95-
.reply(302, undefined, {
96-
Location: 'https://aws.amazon.com/some.zip',
97-
'x-version': '0.13.0',
98-
})
93+
.get('/desktop/0.13.0')
94+
.query(true)
95+
.reply(302, undefined, {
96+
Location: 'https://aws.amazon.com/some.zip',
97+
'x-version': '0.13.0',
98+
})
9999

100100
return download.start(this.options).then(() => {
101101
expect(this.options.version).to.eq('0.13.0')
@@ -114,14 +114,14 @@ describe('download', function () {
114114
this.sandbox.stub(info, 'ensureInstallationDir').rejects(err)
115115

116116
return download
117-
.start(this.options)
118-
.then(() => {
119-
throw new Error('should have caught')
120-
})
121-
.catch((err) => {
122-
logger.error(err)
123-
124-
snapshot('download status errors', normalize(ctx.stdout.toString()))
125-
})
117+
.start(this.options)
118+
.then(() => {
119+
throw new Error('should have caught')
120+
})
121+
.catch((err) => {
122+
logger.error(err)
123+
124+
snapshot('download status errors', normalize(ctx.stdout.toString()))
125+
})
126126
})
127127
})

‎packages/desktop-gui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,6 @@
4343
"react-bootstrap-modal": "3.0.1",
4444
"react-dom": "^15.6.1",
4545
"react-loader": "^2.4.0",
46-
"zunder": "5.1.0"
46+
"zunder": "5.5.2"
4747
}
4848
}

‎packages/driver/src/cy/commands/querying.coffee‎

Lines changed: 4 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ Promise = require("bluebird")
55
$dom = require("../../dom")
66
$utils = require("../../cypress/utils")
77

8-
priorityElement = "input[type='submit'], button, a, label"
9-
108
$expr = $.expr[":"]
119

1210
$contains = $expr.contains
@@ -344,39 +342,14 @@ module.exports = (Commands, Cypress, cy, state, config) ->
344342

345343
options._log.set({$el: $el})
346344

347-
getFirstDeepestElement = (elements, index = 0) ->
348-
## iterate through all of the elements in pairs
349-
## and check if the next item in the array is a
350-
## descedent of the current. if it is continue
351-
## to recurse. if not, or there is no next item
352-
## then return the current
353-
$current = elements.slice(index, index + 1)
354-
$next = elements.slice(index + 1, index + 2)
355-
356-
return $current if not $next
357-
358-
## does current contain next?
359-
if $.contains($current.get(0), $next.get(0))
360-
getFirstDeepestElement(elements, index + 1)
361-
else
362-
## return the current if it already is a priority element
363-
return $current if $current.is(priorityElement)
364-
365-
## else once we find the first deepest element then return its priority
366-
## parent if it has one and it exists in the elements chain
367-
$priorities = elements.filter $current.parents(priorityElement)
368-
if $priorities.length then $priorities.last() else $current
369-
370345
if _.isRegExp(text)
371346
$expr.contains = (elem) ->
372347
## taken from jquery's normal contains method
373348
text.test(elem.textContent or elem.innerText or $.text(elem))
374-
else
375-
text = $utils.escapeQuotes(text)
376349

377350
## find elements by the :contains psuedo selector
378351
## and any submit inputs with the attributeContainsWord selector
379-
selector = "#{filter}:not(script):contains('#{text}'), #{filter}[type='submit'][value~='#{text}']"
352+
selector = $dom.getContainsSelector(text, filter)
380353

381354
checkToAutomaticallyRetry = (count, $el) ->
382355
## we should automatically retry querying
@@ -399,12 +372,9 @@ module.exports = (Commands, Cypress, cy, state, config) ->
399372
verify: false ## dont verify upcoming assertions, we do that ourselves
400373
})
401374

402-
cy.now("get", selector, getOpts).then ($elements) ->
403-
$el = switch
404-
when $elements and $elements.length
405-
getFirstDeepestElement($elements)
406-
else
407-
$elements
375+
cy.now("get", selector, getOpts).then ($el) ->
376+
if $el and $el.length
377+
$el = $dom.getFirstDeepestElement($el)
408378

409379
setEl($el)
410380

‎packages/driver/src/cypress/utils.coffee‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ _ = require("lodash")
33
moment = require("moment")
44

55
$Location = require("./location")
6-
$dom = require("../dom")
76
$errorMessages = require("./error_messages")
87

98
tagOpen = /\[([a-z\s='"-]+)\]/g
@@ -163,6 +162,8 @@ module.exports = {
163162
"{" + str.join(", ") + "}"
164163

165164
stringifyActual: (value) ->
165+
$dom = require("../dom")
166+
166167
switch
167168
when $dom.isDom(value)
168169
$dom.stringify(value, "short")

‎packages/driver/src/dom/elements.coffee‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ $ = require("jquery")
33
$jquery = require("./jquery")
44
$window = require("./window")
55
$document = require("./document")
6+
$utils = require("../cypress/utils")
67

78
fixedOrStickyRe = /(fixed|sticky)/
89

@@ -191,6 +192,37 @@ getElements = ($el) ->
191192
else
192193
els
193194

195+
getContainsSelector = (text, filter = "") ->
196+
if _.isString(text)
197+
text = $utils.escapeQuotes(text)
198+
199+
"#{filter}:not(script):contains('#{text}'), #{filter}[type='submit'][value~='#{text}']"
200+
201+
priorityElement = "input[type='submit'], button, a, label"
202+
203+
getFirstDeepestElement = (elements, index = 0) ->
204+
## iterate through all of the elements in pairs
205+
## and check if the next item in the array is a
206+
## descedent of the current. if it is continue
207+
## to recurse. if not, or there is no next item
208+
## then return the current
209+
$current = elements.slice(index, index + 1)
210+
$next = elements.slice(index + 1, index + 2)
211+
212+
return $current if not $next
213+
214+
## does current contain next?
215+
if $.contains($current.get(0), $next.get(0))
216+
getFirstDeepestElement(elements, index + 1)
217+
else
218+
## return the current if it already is a priority element
219+
return $current if $current.is(priorityElement)
220+
221+
## else once we find the first deepest element then return its priority
222+
## parent if it has one and it exists in the elements chain
223+
$priorities = elements.filter $current.parents(priorityElement)
224+
if $priorities.length then $priorities.last() else $current
225+
194226
## short form css-inlines the element
195227
## long form returns the outerHTML
196228
stringify = (el, form = "long") ->
@@ -262,6 +294,10 @@ module.exports = {
262294

263295
getElements
264296

297+
getContainsSelector
298+
299+
getFirstDeepestElement
300+
265301
getFirstFixedOrStickyPositionParent
266302

267303
getFirstScrollableParent

‎packages/driver/src/dom/index.coffee‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ $coordinates = require("./coordinates")
99
{ isDocument } = $document
1010
{ wrap, unwrap, isJquery } = $jquery
1111
{ isVisible, isHidden, getReasonIsHidden } = $visibility
12-
{ isType, isFocusable, isElement, isScrollable, stringify, getElements, isDetached, isAttached, isTextLike, isSelector, isDescendent, getFirstFixedOrStickyPositionParent, getFirstScrollableParent } = $elements
12+
{ isType, isFocusable, isElement, isScrollable, stringify, getElements, getContainsSelector, getFirstDeepestElement, isDetached, isAttached, isTextLike, isSelector, isDescendent, getFirstFixedOrStickyPositionParent, getFirstScrollableParent } = $elements
1313
{ getCoordsByPosition, getElementPositioning, getElementCoordinatesByPosition, getElementAtPointFromViewport, getElementCoordinatesByPositionRelativeToXY } = $coordinates
1414

1515
isDom = (obj) ->
@@ -59,6 +59,10 @@ module.exports = {
5959

6060
getElements
6161

62+
getContainsSelector
63+
64+
getFirstDeepestElement
65+
6266
getWindowByElement
6367

6468
getReasonIsHidden

‎packages/driver/test/cypress.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@
22
"baseUrl": "http://localhost:3500",
33
"hosts": {
44
"*.foobar.com": "127.0.0.1"
5-
}
5+
},
6+
"pluginsFile": false
67
}

‎packages/reporter/package.json‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"babelify",
2525
{
2626
"presets": [
27-
"es2015",
27+
"env",
2828
"react",
2929
"stage-1"
3030
],
@@ -37,8 +37,13 @@
3737
]
3838
},
3939
"devDependencies": {
40-
"@cypress/react-tooltip": "^0.2.5",
40+
"@cypress/react-tooltip": "0.3.1",
4141
"@cypress/releaser": "0.1.12",
42+
"babel-plugin-add-module-exports": "^0.2.1",
43+
"babel-plugin-transform-decorators-legacy": "^1.3.4",
44+
"babel-preset-env": "^1.6.1",
45+
"babel-preset-react": "^6.24.1",
46+
"babel-preset-stage-1": "^6.24.1",
4247
"bin-up": "^1.1.0",
4348
"chai": "^3.5.0",
4449
"chai-enzyme": "^0.8.0",
@@ -52,13 +57,13 @@
5257
"mobx": "^3.1.15",
5358
"mobx-react": "^4.2.1",
5459
"prop-types": "^15.5.9",
55-
"react": "^15.6.1",
56-
"react-addons-test-utils": "^15.6.0",
57-
"react-dom": "^15.6.1",
58-
"react-test-renderer": "^15.6.1",
60+
"react": "15.6.2",
61+
"react-addons-test-utils": "15.6.2",
62+
"react-dom": "15.6.2",
63+
"react-test-renderer": "15.6.2",
5964
"rebuild-node-sass": "^1.1.0",
6065
"sinon": "^1.17.4",
6166
"sinon-chai": "^2.8.0",
62-
"zunder": "5.1.0"
67+
"zunder": "5.5.2"
6368
}
6469
}

0 commit comments

Comments
 (0)