├── steps_file.js ├── mypuppeteer_helper.js ├── README.md ├── codecept.json ├── .gitignore ├── package.json ├── LICENSE └── TodoMvc_test.js /steps_file.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | // in this file you can append custom step methods to 'I' object 3 | 4 | module.exports = function() { 5 | return actor({ 6 | createTodo: function(title) { 7 | this.fillField('What needs to be done?', title); 8 | this.pressKey('Enter'); 9 | } 10 | }); 11 | } 12 | -------------------------------------------------------------------------------- /mypuppeteer_helper.js: -------------------------------------------------------------------------------- 1 | 2 | 'use strict'; 3 | 4 | class MyPuppeteer extends Helper { 5 | 6 | async renderPageToPdf() { 7 | const page = this.helpers['Puppeteer'].page; 8 | await page.emulateMedia('screen'); 9 | return page.pdf({path: 'page.pdf'}); 10 | } 11 | } 12 | 13 | module.exports = MyPuppeteer; 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Testing React TodoMVC with CodeceptJS 2 | 3 | Demonstrates scenario-driven approach to testing React app with Puppeteer and CodeceptJS 4 | 5 | Learn more at http://codecept.io/puppeteer/ 6 | 7 | ## Execute Tests 8 | 9 | Clone this repository 10 | 11 | Install all required packages 12 | 13 | ``` 14 | npm install 15 | ``` 16 | 17 | Run tests 18 | 19 | ``` 20 | ./node_modules/.bin/codeceptjs run --steps 21 | ``` -------------------------------------------------------------------------------- /codecept.json: -------------------------------------------------------------------------------- 1 | { 2 | "output": "./output", 3 | "helpers": { 4 | "Puppeteer": { 5 | "url": "http://todomvc.com/examples/react/", 6 | "waitForAction": 500 7 | }, 8 | "MyPuppeteer": { 9 | "require": "./mypuppeteer_helper.js" 10 | } 11 | }, 12 | "include": { 13 | "I": "./steps_file.js" 14 | }, 15 | "mocha": {}, 16 | "bootstrap": false, 17 | "teardown": null, 18 | "hooks": [], 19 | "tests": "./*_test.js", 20 | "timeout": 10000, 21 | "name": "todoreact" 22 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | output 2 | 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | 13 | # Directory for instrumented libs generated by jscoverage/JSCover 14 | lib-cov 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 20 | .grunt 21 | 22 | # node-waf configuration 23 | .lock-wscript 24 | 25 | # Compiled binary addons (http://nodejs.org/api/addons.html) 26 | build/Release 27 | 28 | # Dependency directory 29 | node_modules 30 | 31 | # Optional npm cache directory 32 | .npm 33 | 34 | # Optional REPL history 35 | .node_repl_history 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todoreact", 3 | "version": "1.0.0", 4 | "description": "Demonstrates scenario-driven approach to testing with Puppeteer and CodeceptJS", 5 | "main": "TodoMvc_test.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "codeceptjs": "^1.1.0", 9 | "puppeteer": "^0.13.0|^1.0.0" 10 | }, 11 | "scripts": { 12 | "test": "mocha" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/DavertMik/codeceptjs-todomvc-puppeteer.git" 17 | }, 18 | "author": "", 19 | "license": "ISC", 20 | "bugs": { 21 | "url": "https://github.com/DavertMik/codeceptjs-todomvc-puppeteer/issues" 22 | }, 23 | "homepage": "https://github.com/DavertMik/codeceptjs-todomvc-puppeteer#readme" 24 | } 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Michael Bodnarchuk 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /TodoMvc_test.js: -------------------------------------------------------------------------------- 1 | 2 | Feature('TodoMvc'); 3 | 4 | Before((I) => { 5 | I.amOnPage('/'); 6 | }); 7 | 8 | Scenario('create todo item', (I) => { 9 | I.dontSeeElement('.todo-count'); 10 | I.fillField('What needs to be done?', 'Write a guide'); 11 | I.pressKey('Enter'); 12 | I.see('Write a guide', '.todo-list'); 13 | I.see('1 item left', '.todo-count'); 14 | }); 15 | 16 | Scenario('edit todo', (I) => { 17 | I.createTodo('write a review'); 18 | I.see('write a review', '.todo-list'); 19 | I.doubleClick('write a review'); 20 | I.pressKey(['Control', 'a']); 21 | I.fillField({css: ':focus'}, 'write old review'); 22 | I.pressKey('Enter'); 23 | I.see('write old review', '.todo-list'); 24 | }); 25 | 26 | Scenario('enter todo', (I) => { 27 | I.fillField('What needs to be done?', 'write a new review'); 28 | I.pressKey('Enter'); 29 | I.createTodo('finish tests'); 30 | I.createTodo('write blogpost'); 31 | I.see('write a new review', '.todo-list'); 32 | I.see('3 items left', '.todo-count'); 33 | }); 34 | 35 | Scenario('check todo item', (I) => { 36 | within('.todoapp', () => { 37 | I.createTodo('my new item'); 38 | I.see('1 item left', '.todo-count'); 39 | I.click('.todo-list input.toggle'); 40 | }); 41 | I.see('0 items left', '.todo-count'); 42 | }); 43 | 44 | const assert = require('assert'); 45 | Scenario('get value of current tasks', async (I) => { 46 | I.createTodo('do 1'); 47 | I.createTodo('do 2'); 48 | let numTodos = await I.grabTextFrom('.todo-count strong'); 49 | assert.equal(2, numTodos); 50 | }); 51 | 52 | 53 | --------------------------------------------------------------------------------