closes #230 - added Casper.getElementsBound()
Showing
7 changed files
with
86 additions
and
4 deletions
1 | CasperJS Changelog | 1 | CasperJS Changelog |
2 | ================== | 2 | ================== |
3 | 3 | ||
4 | XXXX-XX-XX, v1.0.0 | ||
5 | ------------------ | ||
6 | |||
7 | This version is yet to be released. | ||
8 | |||
9 | - closes [#230](https://github.com/n1k0/casperjs/issues/230) - added [`ClientUtils.getElementsBound()`](http://casperjs.org/api.html#clientutils.getElementsBounds) and [`Casper.getElementsBound()`](http://casperjs.org/api.html#casper.getElementsBounds) | ||
10 | |||
4 | 2012-10-01, v1.0.0-RC2 | 11 | 2012-10-01, v1.0.0-RC2 |
5 | ---------------------- | 12 | ---------------------- |
6 | 13 | ... | ... |
... | @@ -768,6 +768,22 @@ Casper.prototype.getElementBounds = function getElementBounds(selector) { | ... | @@ -768,6 +768,22 @@ Casper.prototype.getElementBounds = function getElementBounds(selector) { |
768 | }; | 768 | }; |
769 | 769 | ||
770 | /** | 770 | /** |
771 | * Retrieves boundaries for all the DOM elements matching the provided DOM CSS3/XPath selector. | ||
772 | * | ||
773 | * @param String selector A DOM CSS3/XPath selector | ||
774 | * @return Array | ||
775 | */ | ||
776 | Casper.prototype.getElementsBounds = function getElementBounds(selector) { | ||
777 | "use strict"; | ||
778 | if (!this.exists(selector)) { | ||
779 | throw new CasperError("No element matching selector found: " + selector); | ||
780 | } | ||
781 | return this.evaluate(function _evaluate(selector) { | ||
782 | return window.__utils__.getElementsBounds(selector); | ||
783 | }, { selector: selector }); | ||
784 | }; | ||
785 | |||
786 | /** | ||
771 | * Retrieves global variable. | 787 | * Retrieves global variable. |
772 | * | 788 | * |
773 | * @param String name The name of the global variable to retrieve | 789 | * @param String name The name of the global variable to retrieve | ... | ... |
... | @@ -350,7 +350,9 @@ | ... | @@ -350,7 +350,9 @@ |
350 | 350 | ||
351 | /** | 351 | /** |
352 | * Retrieves bounding rect coordinates of the HTML element matching the | 352 | * Retrieves bounding rect coordinates of the HTML element matching the |
353 | * provided CSS3 selector | 353 | * provided CSS3 selector in the following form: |
354 | * | ||
355 | * {top: y, left: x, width: w, height:, h} | ||
354 | * | 356 | * |
355 | * @param String selector | 357 | * @param String selector |
356 | * @return Object or null | 358 | * @return Object or null |
... | @@ -370,6 +372,35 @@ | ... | @@ -370,6 +372,35 @@ |
370 | }; | 372 | }; |
371 | 373 | ||
372 | /** | 374 | /** |
375 | * Retrieves the list of bounding rect coordinates for all the HTML elements matching the | ||
376 | * provided CSS3 selector, in the following form: | ||
377 | * | ||
378 | * [{top: y, left: x, width: w, height:, h}, | ||
379 | * {top: y, left: x, width: w, height:, h}, | ||
380 | * ...] | ||
381 | * | ||
382 | * @param String selector | ||
383 | * @return Array | ||
384 | */ | ||
385 | this.getElementsBounds = function getElementsBounds(selector) { | ||
386 | var elements = this.findAll(selector); | ||
387 | var self = this; | ||
388 | try { | ||
389 | return Array.prototype.map.call(elements, function(element) { | ||
390 | var clipRect = element.getBoundingClientRect(); | ||
391 | return { | ||
392 | top: clipRect.top, | ||
393 | left: clipRect.left, | ||
394 | width: clipRect.width, | ||
395 | height: clipRect.height | ||
396 | }; | ||
397 | }); | ||
398 | } catch (e) { | ||
399 | this.log("Unable to fetch bounds for elements matching " + selector, "warning"); | ||
400 | } | ||
401 | }; | ||
402 | |||
403 | /** | ||
373 | * Retrieves a single DOM element matching a given XPath expression. | 404 | * Retrieves a single DOM element matching a given XPath expression. |
374 | * | 405 | * |
375 | * @param String expression The XPath expression | 406 | * @param String expression The XPath expression | ... | ... |
... | @@ -890,7 +890,7 @@ var Tester = function Tester(casper, options) { | ... | @@ -890,7 +890,7 @@ var Tester = function Tester(casper, options) { |
890 | if (utils.isFunction(v1)) { | 890 | if (utils.isFunction(v1)) { |
891 | return v1.toString() === v2.toString(); | 891 | return v1.toString() === v2.toString(); |
892 | } | 892 | } |
893 | if (v1 instanceof Object && v2 instanceof Object) { | 893 | if (v1 instanceof Object) { |
894 | if (Object.keys(v1).length !== Object.keys(v2).length) { | 894 | if (Object.keys(v1).length !== Object.keys(v2).length) { |
895 | return false; | 895 | return false; |
896 | } | 896 | } | ... | ... |
... | @@ -81,4 +81,31 @@ function fakeDocument(html) { | ... | @@ -81,4 +81,31 @@ function fakeDocument(html) { |
81 | casper.test.assertEquals(xpathSelector.path, '//li[text()="blah"]', 'ClientUtils.processSelector() can process a XPath selector'); | 81 | casper.test.assertEquals(xpathSelector.path, '//li[text()="blah"]', 'ClientUtils.processSelector() can process a XPath selector'); |
82 | })(casper); | 82 | })(casper); |
83 | 83 | ||
84 | casper.test.done(); | 84 | (function(casper) { |
85 | casper.start(); | ||
86 | // getElementBounds | ||
87 | casper.then(function() { | ||
88 | this.page.content = '<div id="b1" style="position:fixed;top:10px;left:11px;width:50px;height:60px"></div>'; | ||
89 | this.test.assertEquals(this.getElementBounds('#b1'), | ||
90 | { top: 10, left: 11, width: 50, height: 60 }, | ||
91 | 'ClientUtils.getElementBounds() retrieves element boundaries'); | ||
92 | }); | ||
93 | // getElementsBounds | ||
94 | casper.start(); | ||
95 | casper.then(function() { | ||
96 | var html = '<div id="boxes">'; | ||
97 | html += ' <div style="position:fixed;top:10px;left:11px;width:50px;height:60px"></div>'; | ||
98 | html += ' <div style="position:fixed;top:20px;left:21px;width:70px;height:80px"></div>'; | ||
99 | html += '</div>'; | ||
100 | this.page.content = html; | ||
101 | var bounds = this.getElementsBounds('#boxes div'); | ||
102 | this.test.assertEquals(bounds[0], { top: 10, left: 11, width: 50, height: 60 }, | ||
103 | 'ClientUtils.getElementsBounds() retrieves multiple elements boundaries'); | ||
104 | this.test.assertEquals(bounds[1], { top: 20, left: 21, width: 70, height: 80 }, | ||
105 | 'ClientUtils.getElementsBounds() retrieves multiple elements boundaries'); | ||
106 | }); | ||
107 | })(casper); | ||
108 | |||
109 | casper.run(function() { | ||
110 | this.test.done(); | ||
111 | }); | ... | ... |
... | @@ -27,6 +27,7 @@ t.assert(t.testEquals({1:{name:"bob",age:28}, 2:{name:"john",age:26}}, {1:{name: | ... | @@ -27,6 +27,7 @@ t.assert(t.testEquals({1:{name:"bob",age:28}, 2:{name:"john",age:26}}, {1:{name: |
27 | t.assertNot(t.testEquals({1:{name:"bob",age:28}, 2:{name:"john",age:26}}, {1:{name:"bob",age:28}, 2:{name:"john",age:27}}), 'Tester.testEquals() complex object inequality'); | 27 | t.assertNot(t.testEquals({1:{name:"bob",age:28}, 2:{name:"john",age:26}}, {1:{name:"bob",age:28}, 2:{name:"john",age:27}}), 'Tester.testEquals() complex object inequality'); |
28 | t.assert(t.testEquals(function(x){return x;}, function(x){return x;}), 'Tester.testEquals() function equality'); | 28 | t.assert(t.testEquals(function(x){return x;}, function(x){return x;}), 'Tester.testEquals() function equality'); |
29 | t.assertNot(t.testEquals(function(x){return x;}, function(y){return y+2;}), 'Tester.testEquals() function inequality'); | 29 | t.assertNot(t.testEquals(function(x){return x;}, function(y){return y+2;}), 'Tester.testEquals() function inequality'); |
30 | t.assert(t.testEquals([{a:1, b:2}, {c:3, d:4}], [{a:1, b:2}, {c:3, d:4}]), 'Tester.testEquals() arrays of objects'); | ||
30 | 31 | ||
31 | t.comment('Tester.sortFiles()'); | 32 | t.comment('Tester.sortFiles()'); |
32 | var testDirRoot = fs.pathJoin(phantom.casperPath, 'tests', 'testdir'); | 33 | var testDirRoot = fs.pathJoin(phantom.casperPath, 'tests', 'testdir'); | ... | ... |
-
Please register or sign in to post a comment