|
| 1 | +# TestCafe |
| 2 | + |
| 3 | +[TestCafe](https://devexpress.github.io/testcafe/) is another alternative engine for driving browsers. It is driven by unique technology which provides fast and simple cross browser testing for desktop and mobile browsers. Unlike WebDriver or Puppeteer, TestCafe doesn't control a browser at all. It is not a browser itself, like [Nightmare](https://codecept.io/nightmare) or Cypress. **TestCafe core is a proxy server** that runs behind the scene, and transforms all HTML and JS to include code that is needed for test automation. |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | +This is very smart idea. But to use TestCafe on daily basis you need to clearly understand its benefits and limitations: |
| 8 | + |
| 9 | +### Pros |
| 10 | + |
| 11 | +* **Fast**. Browser is controlled from inside a web page. This makes test run inside a browser as fast as your browser can render page with no extra network requests. |
| 12 | +* **Simple Cross-Browser Support.** Because TestCafe only launches browsers, it can **automate browser** on desktop or mobile. Unlike WebDriver, you don't need special version of browser and driver to prepare to run tests. Setup simplified. All you need is just a browser installed, and you are ready to go. |
| 13 | +* **Stable to Execution.** Because a test is executed inside a browser, the network latency effects are reduced. Unlike WebDriver you won't hit stale element exceptions, or element not interactable exceptions, as from within a web browser all DOM elements are accessible. |
| 14 | + |
| 15 | +## Cons |
| 16 | + |
| 17 | +* **Magic.** Browsers executed in TestCafe are not aware that they run in test mode. So at some edges automation control can be broken. It's also quite hard to debug possible issues, as you don't know how actually a web page is parsed to inject automation scripts. |
| 18 | +* **No Browser Control.** Because TestCafe do not control browser, you can't actually automate all users actions. For instance, TestCafe can't open new tabs or open a new browser window in incognito mode. There can be also some issues running tests on 3rd party servers or inside iframes. |
| 19 | +* **Simulated Events.** Events like `click` or `doubleClick` are simulated by JavaScript internally. Inside WebDriver or Puppeteer, where those events are dispatched by a browser, called native events. Native events are closer to real user experience. So in some cases simulated events wouldn't represent actual user experience, which can lead to false positive results. For instance, a button which can't be physically clicked by a user, would be clickable inside TestCafe. |
| 20 | + |
| 21 | +Anyway, TestCafe is a good option to start if you need cross browser testing. And here is the **reason to use TestCafe with CodeceptJS: if you hit an edge case or issue, you can easily switch your tests to WebDriver**. As all helpers in CodeceptJS share the same syntax. |
| 22 | + |
| 23 | +CodeceptJS is a rich testing frameworks which also provides features missing in original TestCafe: |
| 24 | + |
| 25 | +* [Cucumber integration](https://codecept.io/bdd) |
| 26 | +* [Real Page Objects](https://codecept.io/pageobjects) |
| 27 | +* [Data Management via API](https://codecept.io/data) |
| 28 | +* and others |
| 29 | + |
| 30 | +## Writing Tests |
| 31 | + |
| 32 | +To start using TestCafe with CodeceptJS install both via NPM |
| 33 | + |
| 34 | +> If you don't have `package.json` in your project, create it with `npm init -y`. |
| 35 | +
|
| 36 | +``` |
| 37 | +npm i codeceptjs testcafe --save-dev |
| 38 | +``` |
| 39 | + |
| 40 | +Then you need to initialize a project, selecting TestCafe when asked: |
| 41 | + |
| 42 | +``` |
| 43 | +npx codeceptjs init |
| 44 | +``` |
| 45 | + |
| 46 | +A first test should be created with `codeceptjs gt` command |
| 47 | + |
| 48 | +``` |
| 49 | +npx codeceptjs gt |
| 50 | +``` |
| 51 | + |
| 52 | +In the next example we will [TodoMVC application](http://todomvc.com/examples/angularjs/#/). So let's create a test which will fill in todo list: |
| 53 | + |
| 54 | +```js |
| 55 | +Feature('TodoMVC'); |
| 56 | + |
| 57 | +Scenario('create todo item', (I) => { |
| 58 | + I.amOnPage('http://todomvc.com/examples/angularjs/#/'); |
| 59 | + I.fillField('.new-todo', todo) |
| 60 | + I.pressKey('Enter'); |
| 61 | + I.seeNumberOfVisibleElements('.todo-list li', 1); |
| 62 | + I.see('1 item left', '.todo-count'); |
| 63 | +}); |
| 64 | +``` |
| 65 | + |
| 66 | +Same syntax is the same for all helpers in CodeceptJS so to learn more about available commands learn [CodeceptJS Basics](https://codecept.io/basics). |
| 67 | + |
| 68 | +> [▶ Complete list of TestCafe actions](https://codecept.io/helpers/TestCafe) |
| 69 | +
|
| 70 | +## Page Objects |
| 71 | + |
| 72 | +Multiple tests can be refactored to share some logic and locators. It is recommended to use PageObjects for this. For instance, in example above, we could create special actions for creating todos and checking them. If we move such methods in a corresponding object a test would look even clearer: |
| 73 | + |
| 74 | +```js |
| 75 | +Scenario('Create a new todo item', async (I, TodosPage) => { |
| 76 | + I.say('Given I have an empty todo list') |
| 77 | + |
| 78 | + I.say('When I create a todo "foo"') |
| 79 | + TodosPage.enterTodo('foo') |
| 80 | + |
| 81 | + I.say('Then I see the new todo on my list') |
| 82 | + TodosPage.seeNumberOfTodos(1) |
| 83 | + |
| 84 | + I.saveScreenshot('create-todo-item.png') |
| 85 | +}) |
| 86 | + |
| 87 | +Scenario('Create multiple todo items', async (I, TodosPage) => { |
| 88 | + I.say('Given I have an empty todo list') |
| 89 | + |
| 90 | + I.say('When I create todos "foo", "bar" and "baz"') |
| 91 | + TodosPage.enterTodo('foo') |
| 92 | + TodosPage.enterTodo('bar') |
| 93 | + TodosPage.enterTodo('baz') |
| 94 | + |
| 95 | + I.say('Then I have these 3 todos on my list') |
| 96 | + TodosPage.seeNumberOfTodos(3) |
| 97 | + |
| 98 | + I.saveScreenshot('create-multiple-todo-items.png') |
| 99 | +}) |
| 100 | +``` |
| 101 | + |
| 102 | +> ℹ [Source code of this example](https://github.com/hubidu/codeceptjs-testcafe-todomvc) is available on GitHub. |
| 103 | +
|
| 104 | +A PageObject can be injected into a test by its name. Here is how TodosPage looks like: |
| 105 | + |
| 106 | +```js |
| 107 | +// inside todos_page.js |
| 108 | +const { I } = inject(); |
| 109 | + |
| 110 | +module.exports = { |
| 111 | + goto() { |
| 112 | + I.amOnPage('http://todomvc.com/examples/angularjs/#/') |
| 113 | + }, |
| 114 | + |
| 115 | + enterTodo(todo) { |
| 116 | + I.fillField('.new-todo', todo) |
| 117 | + I.pressKey('Enter') |
| 118 | + }, |
| 119 | + |
| 120 | + seeNumberOfTodos(numberOfTodos) { |
| 121 | + I.seeNumberOfVisibleElements('.todo-list li', numberOfTodos) |
| 122 | + }, |
| 123 | +} |
| 124 | +``` |
| 125 | + |
| 126 | +> [▶ Read more about PageObjects in CodeceptJS](https://codecept.io/pageobjects) |
| 127 | +
|
| 128 | +## Extending |
| 129 | + |
| 130 | +If you want to use TestCafe API inside your tests you can put them into actions of `I` object. To do so you can generate a new helper, access TestCafe helper, and get the test controller. |
| 131 | + |
| 132 | +Create a helper using `codecepjs gh` command. |
| 133 | + |
| 134 | +``` |
| 135 | +npx codeceptjs gh |
| 136 | +``` |
| 137 | + |
| 138 | +All methods of newly created class will be added to `I` object. |
| 139 | + |
| 140 | +```js |
| 141 | +const Helper = codeceptjs.helper; |
| 142 | + |
| 143 | +class MyTestCafe extends Helper { |
| 144 | + |
| 145 | + slowlyFillField(field, text) { |
| 146 | + // import test controller from TestCafe helper |
| 147 | + const { t } = this.helpers.TestCafe; |
| 148 | + // use TestCafe API here |
| 149 | + return t.setTestSpeed(0.1) |
| 150 | + .typeText(field, text); |
| 151 | + } |
| 152 | + |
| 153 | +} |
| 154 | +``` |
0 commit comments