rodrigojmartin

import { by, Target } from '@serenity-js/webdriverio';
 
export class TodoMVCApp {
    static newTodoField = Target.the('new todo field').located(by.css('.new-todo'));
    static recordedItems = Target.all('recorded items').located(by.css('.todo-list li'));
}

rodrigojmartin

import { Task } from '@serenity-js/core';
import { Enter, Press } from '@serenity-js/webdriverio';
import {Key} from '@serenity-js/webdriverio/lib/input'
import { TodoMVCApp } from './ui/TodoMVCApp';
 
export const AddAnItemCalled = (name: string) =>
    Task.where(`#actor adds an item called "${ name }"`,
        Enter.theValue(name).into(TodoMVCApp.newTodoField),
        Press.the(Key.Enter).in(TodoMVCApp.newTodoField),
    );

rodrigojmartin

import { Ensure, startsWith } from '@serenity-js/assertions';
import { Task } from '@serenity-js/core';
import { Navigate, Website } from '@serenity-js/webdriverio';
 
 
export const OpenTheApp = () =>
    Task.where(`#actor opens the app`,
        Navigate.to(`https://todomvc.com/examples/vue/`),
        Ensure.that(Website.title(), startsWith('Vue')),
    );

rodrigojmartin

import { Actor, Cast } from '@serenity-js/core';
import { BrowseTheWeb } from '@serenity-js/webdriverio';
 
export class Actors implements Cast {
    prepare(actor: Actor): Actor {
        return actor.whoCan(
            BrowseTheWeb.using(browser),
        );
    }
}

rodrigojmartin

import { Ensure, equals } from '@serenity-js/assertions';
import { actorCalled } from '@serenity-js/core';
import { OpenTheApp} from './serenity/OpenTheApp';
import { AddAnItemCalled } from './serenity/AddAnItemCalled';
import { RecordedItems } from './serenity/RecordedItems';
import { describe, it } from 'mocha';
 
 
describe('Todo List App - Screenplay', () => {
 

rodrigojmartin

import { expect } from 'chai';
import { describe, it } from 'mocha';
 
 
describe('TodoList App - Page Object', function () {
 
    // The page object representing the Todo list:
    class TodoList {
         
        get whatNeedsToBeDoneInputBox() {

rodrigojmartin

In order to focus on my outstanding tasks
As a forgetful person
I want to be able to add items to my ToDo List

rodrigojmartin

import { describe, it } from 'mocha';
import { expect } from 'chai';
 
 
describe('TodoList App - Scripted', function () {
 
    it('allows the user to add items to the TodoList', async function () {
        let itemsText = [];
        await browser.url('https://todomvc.com/examples/vue/');
        await $('.new-todo').waitForDisplayed(({ timeout: 2000 }));