Learn how to automate your web application with an insanely fast, headless browser testing tool

1. AUTOMATED UI TESTING WITH ZOMBIE.JS
jjude.com @jjude

2. jjude.com @jjude
WHY AUTOMATE BROWSER TESTING?

3. jjude.com @jjude
TYPICAL WEB APPLICATION LAYERS

4. jjude.com @jjude
FOR STABLE PRODUCT
AUTOMATED TEST
AUTOMATED TEST
AUTOMATED TEST

5. jjude.com @jjude
FOR STABLE PRODUCT
AUTOMATED TEST
AUTOMATED TEST
ZOMBIE.JS
Insanely fast, headless browser testing

6. jjude.com @jjude
code commit build test deploy smoke test
3rd party code
TYPICAL DEVELOPMENT STAGES

7. jjude.com @jjude
code commit build test deploy smoke test
3rd party code
FOR STABLE PRODUCT
AUTOMATED TEST AUTOMATED TEST AUTOMATED TEST

8. jjude.com @jjude
code commit build test deploy smoke test
3rd party code
FOR STABLE PRODUCT
ZOMBIE.JS ZOMBIE.JS ZOMBIE.JS

9. jjude.com @jjude
WHAT IS ZOMBIE.JS?

10. jjude.com @jjude
Insanely fast, headless browser testing tool

11. jjude.com @jjude
GETTING STARTED WITH ZOMBIE.JS

12. jjude.com @jjude
npm install zombie --save-dev

13. jjude.com @jjude
const Browser = require('zombie');
const browser = new Browser({ site: "http://localhost:5000" });
browser.visit('/', () => {
browser.assert.text("title", "Learn Zombie.js by @jjude");
});

14. jjude.com @jjude
const Browser = require('zombie');
const browser = new Browser({ site: "http://localhost:5000" });
browser.visit('/', () => {
browser.assert.text("title", "Learn Zombie.js by @jjude");
});
1. Initialize

15. jjude.com @jjude
const Browser = require('zombie');
const browser = new Browser({ site: "http://localhost:5000" });
browser.visit('/', () => {
browser.assert.text("title", "Learn Zombie.js by @jjude");
});
2. Visit a page

16. jjude.com @jjude
const Browser = require('zombie');
const browser = new Browser({ site: "http://localhost:5000" });
browser.visit('/', () => {
browser.assert.text("title", "Learn Zombie.js by @jjude");
});
3. Test

17. jjude.com @jjude
COMPLETE EXAMPLE WITH BDD/TDD

18. jjude.com @jjude
describe("User visits signin form", () => {
it("should have a form and email and password fields", (done) => { });
describe("Submits form with email, password", () => {
it("should be successful", (done) => { });
it("should show newsite page after successful signin", (done) => { });
});
});
Describe the test first

19. jjude.com @jjude
describe("User visits signin form", () => {
const browser = new Browser({ site: "http://localhost:5000" });
before((done) => {
browser.visit("/signin", done);
});
it("should have a form and email and password fields", (done) => {
browser.assert.success();
browser.assert.text("title", "Learn Zombie.js by @jjude");
browser.assert.attribute("form", "method", "post");
browser.assert.element("form input[name=email]");
done();
});
describe("Submits form with email, password", () => {
before((done) => {
browser
.fill("email", "testing@example.com")
.fill("password", "123456");
browser.pressButton("Signin »", done);
});
it("should be successful", (done) => {
browser.assert.success();
done();
});
it("should show newsite page after successful signin", (done) => {
browser.assert.url({ pathname: "/newentry" });
done();
});
});
});
Complete
code
with
zombie.js

20. jjude.com @jjude
WHERE TO GO FROM HERE?

21. jjude.com @jjude
http://zombie.js.org/

22. jjude.com @jjude
http://jjude.com/courses
FREE VIDEO COURSE

23. jjude.com @jjude
CONTACTS
http://jjude.com
http://twitter.com/jjude

24. jjude.com @jjude
THANK YOU
KEEP BUILDING AWESOME PRODUCTS