diff --git a/docs/articles/blog/2017-4-26-testcafe-v0-15-0-released.md b/docs/articles/blog/2017-4-26-testcafe-v0-15-0-released.md new file mode 100644 index 00000000000..53fe367c182 --- /dev/null +++ b/docs/articles/blog/2017-4-26-testcafe-v0-15-0-released.md @@ -0,0 +1,190 @@ +--- +layout: post +title: TestCafe v0.15.0 Released +permalink: /blog/:title.html +--- +# TestCafe v0.15.0 Released + +Plugins for React and Vue.js, TestCafe Docker image, support for Internet access proxies and lots of bug fixes. + + + +## Breaking Changes + +### New calls to selector's withText method no longer override previous calls + +We have changed the way the [withText](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#withtext) +method behaves when it is called in a chain. + +```js +const el = Selector('div').withText('This is').withText('my element'); +``` + +In previous versions, this selector searched for a `div` with text `my element` because the second call to `withText` overrode the first one. + +Now this code returns an element whose text contains both `This is` and `my element` as the second call compounds with the first one. + +## Enhancements + +### ⚙ Plugin for testing React apps + +In this release cycle, we have created a plugin for testing React applications. +This plugin allows you to select React components by their names. + +```js +import ReactSelector from 'testcafe-react-selector'; + +const TodoList = ReactSelector('TodoApp TodoList'); +const itemsCountStatus = ReactSelector('TodoApp div'); +const itemsCount = ReactSelector('TodoApp div span'); +``` + +And it enables you to get React component's `state` and `props`. + +```js +import ReactSelector from 'testcafe-react-selector'; + +fixture `TODO list test` + .page('http://localhost:1337'); + +test('Check list item', async t => { + const el = ReactSelector('TodoList'); + + await t.expect(el.getReact().props.priority).eql('High'); + await t.expect(el.getReact().state.isActive).eql(false); +}); +``` + +To learn more, see the [testcafe-react-selectors](https://github.com/DevExpress/testcafe-react-selectors/) repository. + +### ⚙ Plugin for testing Vue.js apps + +In addition to the React plugin, we have released a plugin that facilitates testing Vue.js applications. + +In the same manner, it allows you to select Vue.js components with `VueSelector` selectors. + +```js +import VueSelector from 'testcafe-vue-selectors'; + +const rootVue = VueSelector(); +const todoInput = VueSelector('todo-input'); +const todoItem = VueSelector('todo-list todo-item'); +``` + +These selectors allow you to get Vue component's `props`, `state` and `computed` properties. + +```js +import VueSelector from 'testcafe-vue-selector'; + +fixture `TODO list test` + .page('http://localhost:1337'); + +test('Check list item', async t => { + const todoItem = VueSelector('todo-item'); + + await t + .expect(todoItem.getVue().props.priority).eql('High') + .expect(todoItem.getVue().state.isActive).eql(false) + .expect(todoItem.getVue().computed.text).eql('Item 1'); +}); +``` + +To learn more, see the [testcafe-vue-selectors](https://github.com/DevExpress/testcafe-vue-selectors) repository. + +### ⚙ TestCafe Docker image ([#1141](https://github.com/DevExpress/testcafe/issues/1141)) + +We have created a Docker image with TestCafe, Chromium and Firefox preinstalled. + +You no longer need to manually install browsers or the testing framework on your server. +Pull the Docker image from the repository and run TestCafe immediately. + +```sh +docker pull testcafe/testcafe +docker run -v //user/tests:/tests -it testcafe/testcafe firefox tests/**/*.js +``` + +To learn more, see [Using TestCafe Docker Image](https://devexpress.github.io/testcafe/documentation/using-testcafe/installing-testcafe.html#using-testcafe-docker-image) + +### ⚙ Support for Internet access proxies ([#1206](https://github.com/DevExpress/testcafe/issues/1206)) + +If your local network uses a proxy server to access the Internet, TestCafe can use it reach the external webpages. + +To specify the proxy server, use a command line option + +```sh +testcafe chrome my-tests/**/*.js --proxy 172.0.10.10:8080 +``` + +or a method in the API. + +```js +runner.useProxy('username:password@proxy.mycorp.com'); +``` + +Note that you can pass the credentials with the proxy server host. + +### ⚙ Debugging mode option ([#1347](https://github.com/DevExpress/testcafe/issues/1347)) + +As an alternative to calling the [t.debug](https://devexpress.github.io/testcafe/documentation/test-api/debugging.html#client-side-debugging) method +in test code, you can now specify the `--debug-mode` command line option to pause the test before the first action or assertion. +When the test is paused, you can debug in the browser developer tools as well as continue test execution step by step. + +```sh +testcafe chrome my-tests/**/*.js --debug-mode +``` + +If you use TestCafe API, provide the `debugMode` option to the `runner.run` method. + +```js +runner.run({ debugMode: true }); +``` + +### ⚙ Filtering selector's matching set by attribute ([#1346](https://github.com/DevExpress/testcafe/issues/1346)) + +You can now use the `withAttribute` method to select elements that have a particular attribute set to a specific value. +You can omit the attribute value to select elements that simply have the specified attribute. + +```js +const el = Selector('div').withAttribute('attributeName', 'value').nth(2); +``` + +### ⚙ hasAttribute method added to DOM node state ([#1045](https://github.com/DevExpress/testcafe/issues/1045)) + +For you convenience, the DOM node state object now provides the `hasAttribute` method that allows you to determine if an element has a particular attribute. + +```js +const el = Selector('div.button'); + +t.expect(el.hasAttribute('disabled')).ok(); +``` + +### ⚙ Redirection when switching between roles ([#1339](https://github.com/DevExpress/testcafe/issues/1339)) + +[User roles](https://devexpress.github.io/testcafe/documentation/test-api/authentication/user-roles.html) now provide a `preserveUrl` option +that allows you to save the webpage URL to which the browser was redirected after logging in. If you enable this option when creating a role, +the browser will be redirected to the saved URL every time you switch to this role. + +```js +const regularUser = Role(url, async t => { + /* authentication code */ +}, { preserveUrl: true }) +``` + +## Bug Fixes + +* Fixed a bug where incorrect call site and callstack were generated for an assertion that failed in a class method ([#1267](https://github.com/DevExpress/testcafe/issues/1267)) +* Incorrect validation result no longer appears when a test controller is used inside an async function ([#1285](https://github.com/DevExpress/testcafe/issues/1285)) +* Click on the status panel no longer affects the page state ([#1389](https://github.com/DevExpress/testcafe/issues/1389)) +* The `input` event is now raised with a correct selection value when input value was changed ([#1388](https://github.com/DevExpress/testcafe/issues/1388)) +* Inline source maps are now placed in transpiled files so that breakpoints work correctly ([#1375](https://github.com/DevExpress/testcafe/issues/1375)) +* `value` and `selectedIndex` in the `input` event handler for the dropdown element are now valid ([#1366](https://github.com/DevExpress/testcafe/issues/1366)) +* A `presskey('enter')` call now raises the `click` event on a button element ([#1424](https://github.com/DevExpress/testcafe/issues/1424)) +* The cursor position in Monaco editor is now set correctly on the click action ([#1385](https://github.com/DevExpress/testcafe/issues/1385)) +* `hasScroll` now works correctly if the `body` has absolute positioning ([#1353](https://github.com/DevExpress/testcafe/issues/1353)) +* Text can now be typed into HTML5 input elements ([#1327](https://github.com/DevExpress/testcafe/issues/1327)) +* `focusin` and `focusout` events are now raised when the browser window is in the background ([testcafe-hammerhead/#1044](https://github.com/DevExpress/testcafe-hammerhead/issues/1044)) +* `caretPositionFromPoint` and `caretRangeFromPoint` now ignore TestCafe UI elements on the page ([testcafe-hammerhead/#1084](https://github.com/DevExpress/testcafe-hammerhead/issues/1084)) +* Images created with the `Image` constructor are now loaded through the proxy ([testcafe-hammerhead/#1087](https://github.com/DevExpress/testcafe-hammerhead/issues/1087)) +* The `innerText` return value is now clear of script and style code ([testcafe-hammerhead/#1079](https://github.com/DevExpress/testcafe-hammerhead/issues/1079)) +* Non-string values for element's text properties are now converted to `String` ([testcafe-hammerhead/#1091](https://github.com/DevExpress/testcafe-hammerhead/issues/1091)) +* SVG elements are now processed correctly in IE ([testcafe-hammerhead/#1083](https://github.com/DevExpress/testcafe-hammerhead/issues/1083)) \ No newline at end of file