AlexanderMoskovkin

const todoInput = VueSelector('todo-input');
const todoItem  = VueSelector('todo-list todo-item');

AlexanderMoskovkin

import { t } from 'testcafe';

export default async function login () {
  await t
    .typeText(loginInput, 'login')
    .typeText(passwordInput, 'password');
  
  // ...
}

AlexanderMoskovkin

{
    "scripts": {
        "test": "testcafe chrome todomvc.js"
    }
}

AlexanderMoskovkin

import Page from './page-object.js';

fixture `Todo App test`
	.page `http://localhost:3000/`;

const page = new Page();

test('Mark task as completed', async t => {    
	//We create selector for the first task in the list 
    const firstTask     = page.items.nth(0);

AlexanderMoskovkin

import Page from './page-object.js';

fixture `Todo App test`
	.page `http://localhost:3000/`;
    
const page = new Page();
    
test('Add a new item', async t => {
   //To get the number of elements in the todo list, we use the count property of the TestCafe Selector. 
   //For more information, see http://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#check-if-an-element-exists

AlexanderMoskovkin

import Page from './page-object.js';

fixture `Todo App test`
	.page `http://localhost:3000/`;
    
const page = new Page();

AlexanderMoskovkin

import ReactSelector from 'testcafe-react-selectors';

export default class TodoMVCPage {
    constructor () {
        this.textInput = ReactSelector('Header TodoTextInput');
        this.items     = ReactSelector('TodoItem');
    }
}

AlexanderMoskovkin

<App>
    <Header>
        <TodoTextInput />
    </Header>
    <MainSection>
    	<ul>
            <TodoItem />
            ...
            <TodoItem />
        </ul>

AlexanderMoskovkin

import { t } from 'testcafe';

export default class Page {
    async type (selector, text) {
        await t.typeText(selector, text);
    }
}

AlexanderMoskovkin

var changeType           = Selection._needChangeInputType(el);
var useInternalSelection = changeType && Selection._needForInternalSelection();

static _needChangeInputType (el) {
   return (browserUtils.isWebKit || Selection._needForInternalSelection())
     && domUtils.isInputElement(el) && /^(number|email)$/.test(el.type);
 }

static _needForInternalSelection () {
  return browserUtils.isFirefox && browserUtils.version > 50;