Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Superfast Automated Web
Testing
with CasperJS & PhantomJS
Agenda
1. What’s Casper
2. Why Casper
3. Installation
4. Live demo
5. Debugging
6. Refactoring
7. Advanced topics
Web UI testing framework
Similar to Selenium Watir
Built on top of PhantomJS
Started around Sep 2011
3329 stars on Github
...
Why Casper?
Fast
No browser UI
Webkit based
Execution Speed
Write front end UI testing using JS
Did I mention how fast tes...
How to install and run
Requirements: python + phantomJS
Available on Windows, OSX, Linux
Install
OSX: $	brew	install	caspe...
test.assertTextExists("Todo	App")	
test.assert(1	==	1)	
test.assertDoesntExist("#justin_bieber")	
test.assertEquals(1+1,	2...
casper.click("#create_task")	
casper.clickLabel("My	link	is	beautiful",	"a");	
casper.clickLabel("But	my	button	is	sexier"...
WTF is then()?
“then() basically adds a new navigation step in a stack. A step is a javascript
function which can do two d...
casper.waitForSelector("#sun",	function()	{	alert("Go	out	and	play");	});	
	
casper.waitWhileSelector(".dark_clouds",	func...
casper.waitUntilVisible("#natalie_portman",	function()	{});	
casper.waitWhileVisible(".one_direction_fans",	function()	{})...
casper.sendKeys('form#contact	input#name',	
'Chuck	Norris');	
	
casper.fill('form#contact',	{	
			'name':	'Chuck	Norris'	
...
casper.evaluate(function()	{	
				return	$('.tasks').length;	
});	
Execute Javascript
casper.click("#link");	
	
x	=	require('casper').selectXPath;	
casper.click(x("//a[@id='link']"));	
CSS3 VS XPath selectors
Debugging Casper
casper.echo(casper.getHTML()	
casper.capture("screenshot.png")	
casper.on("remote.message",	function	(msg...
Refactoring
common.js
casper.createTask	=	function(title)	{	
		this.sendKeys('#new-todo',	title);	
		return	this.sendKeys(...
Advanced topics
1.  Setup/tear down
2.  Support for file downloads, HTTP auth
3.  Support for browser back/forward, scroll...
About me+us
Author: Herve Vu Roussel (see source at GitHub)
Find me at: hroussel@gmail.com
This presentation was made for ...
PLEASE CLAP
Nächste SlideShare
Wird geladen in …5
×

Superfast Automated Web Testing with CasperJS & PhantomJS

9.922 Aufrufe

Veröffentlicht am

Superfast Automated Web Testing with CasperJS & PhantomJS

Veröffentlicht in: Technologie
  • If you are looking for trusted essay writing service I highly recommend ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ The service I received was great. I got an A on my final paper which really helped my grade. Knowing that I can count on them in the future has really helped relieve the stress, anxiety and workload. I recommend everyone to give them a try. You'll be glad you did.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Dating direct: ❤❤❤ http://bit.ly/2F7hN3u ❤❤❤
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Sex in your area is here: ❤❤❤ http://bit.ly/2F7hN3u ❤❤❤
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Unlock Her Legs(Official) $69 | Get 90% Off + 8 Special Bonus? ♥♥♥ http://scamcb.com/unlockher/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • How to Grip Her Attention - Unlock Her Legs ★★★ http://ishbv.com/unlockher/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Superfast Automated Web Testing with CasperJS & PhantomJS

  1. 1. Superfast Automated Web Testing with CasperJS & PhantomJS
  2. 2. Agenda 1. What’s Casper 2. Why Casper 3. Installation 4. Live demo 5. Debugging 6. Refactoring 7. Advanced topics
  3. 3. Web UI testing framework Similar to Selenium Watir Built on top of PhantomJS Started around Sep 2011 3329 stars on Github What’s CasperJS?
  4. 4. Why Casper? Fast No browser UI Webkit based Execution Speed Write front end UI testing using JS Did I mention how fast test runs?
  5. 5. How to install and run Requirements: python + phantomJS Available on Windows, OSX, Linux Install OSX: $ brew install casperjs --devel Node: $ npm install -g casperjs Run $ casperjs test mytest.js
  6. 6. test.assertTextExists("Todo App") test.assert(1 == 1) test.assertDoesntExist("#justin_bieber") test.assertEquals(1+1, 2) test.assertElementCount(".good_justin_bieber_son gs", 0) Assertions
  7. 7. casper.click("#create_task") casper.clickLabel("My link is beautiful", "a"); casper.clickLabel("But my button is sexier", "button"); Navigation clicks
  8. 8. WTF is then()? “then() basically adds a new navigation step in a stack. A step is a javascript function which can do two different things: - waiting for the previous step - if any - being executed - waiting for a requested url and related page to load” Niko, Creator of CasperJS Source: http://stackoverflow.com/questions/13785670/passing-variable-from-this-evaluate-to-casper-then
  9. 9. casper.waitForSelector("#sun", function() { alert("Go out and play"); }); casper.waitWhileSelector(".dark_clouds", function() { alert("Go out and play"); }); casper.waitFor(function check() { return this.evaluate(function() { return $(".dark_clouds").length == 0 }); }, function then() { alert("Go out and play!"); }); Waiting for element to load
  10. 10. casper.waitUntilVisible("#natalie_portman", function() {}); casper.waitWhileVisible(".one_direction_fans", function() {}); casper.waitForSelectorTextChange("#inbox_unread_count", function() {}); casper.start("http://why.univer.se/").waitForText("42", function() {}); casper.start("http://foo/").waitForUrl(/login.html$/, function() {}); casper.waitForResource("scarlett_johansson.png", function() {}); casper.wait(1000, function() {}); // No!! Waiting for element to load (cont.)
  11. 11. casper.sendKeys('form#contact input#name', 'Chuck Norris'); casper.fill('form#contact', { 'name': 'Chuck Norris' }, true); Type text, fill forms
  12. 12. casper.evaluate(function() { return $('.tasks').length; }); Execute Javascript
  13. 13. casper.click("#link"); x = require('casper').selectXPath; casper.click(x("//a[@id='link']")); CSS3 VS XPath selectors
  14. 14. Debugging Casper casper.echo(casper.getHTML() casper.capture("screenshot.png") casper.on("remote.message", function (msg) { casper.echo('Browser says: ' + msg) } Verbose mode $ casper --verbose --log-level=debug Use safari (for rendering issues)
  15. 15. Refactoring common.js casper.createTask = function(title) { this.sendKeys('#new-todo', title); return this.sendKeys('#new-todo', this.page.event.key.Enter); }; mytest.js casper.createTask('Code feature 1');
  16. 16. Advanced topics 1.  Setup/tear down 2.  Support for file downloads, HTTP auth 3.  Support for browser back/forward, scroll, reload, viewport site 4.  Support for page events, alerts handling 5.  Support for Continuous Integration a.  Jenkins XUnit output $ casperjs test mytest.js --xunit=outcome.xml b.  GruntJS 6.  Support for HTTPS $ casperjs tumblr.js --ssl-protocol=any 7.  Weak support for Drag and Drop
  17. 17. About me+us Author: Herve Vu Roussel (see source at GitHub) Find me at: hroussel@gmail.com This presentation was made for Javascript Ho Chi Minh City meetup group You can find us at: http://www.meetup.com/JavaScript-Ho-Chi-Minh-City/ https://www.facebook.com/JavaScriptHCMC https://plus.google.com/u/0/communities/116105314977285194967 http://www.slideshare.net/JavascriptMeetup
  18. 18. PLEASE CLAP

×