Last active
October 24, 2021 17:06
-
-
Save fernyb/8eef3031945fcbc0c6e4f201665c1ebf to your computer and use it in GitHub Desktop.
Cypress Page Objects TypeScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type JQueryElement = Cypress.Chainable<JQuery<HTMLElement>>; | |
interface TodoItemRow { | |
name(): JQueryElement; | |
delete(): JQueryElement; | |
checkbox(): JQueryElement; | |
isComplete(fn: (isComplete: boolean) => void): void; | |
hasClass(name: string, fn: (hasClass: boolean) => void): void; | |
} | |
class TodoTable { | |
static itemRow(tr: () => JQueryElement): TodoItemRow { | |
return { | |
name: () => tr().find("label"), | |
delete: () => tr().find("button.destroy"), | |
checkbox: () => tr().find("input.toggle"), | |
isComplete(fn: (isComplete: boolean) => void): void { | |
this.hasClass("completed", fn); | |
}, | |
hasClass(name: string, fn: (hasClass: boolean) => void): void { | |
tr().then(($tr) => { | |
fn($tr.hasClass(name)); | |
}); | |
} | |
}; | |
} | |
static todoLis() { | |
return cy.get(`ul.todo-list > li`); | |
} | |
static items(): Cypress.Chainable<TodoItemRow[]> { | |
return this.todoLis().then(($lis) => { | |
return $lis.toArray().map(($el) => { | |
return this.itemRow(() => cy.wrap($el)) | |
}); | |
}); | |
} | |
static itemRowsFn(fn: (rows: TodoItemRow[]) => void) { | |
this.items().then((mappedElements) => { | |
fn(mappedElements); | |
}); | |
} | |
static itemRows() { | |
return this.items(); | |
} | |
static rowWithData(data: string, func: (row: TodoItemRow) => void): void { | |
this.todoLis().contains(data).closest("li").then(($li) => { | |
if ($li.length > 1) { | |
throw new Error(`rowWithData can only return 1 row but found ${$li.length} consider using itemRowsFn for multiple rows`); | |
} | |
func(this.itemRow(() => cy.wrap($li))); | |
}); | |
} | |
static rowAtIndex(idx: number, func: (row: TodoItemRow) => void): void { | |
func(this.itemRow(() => this.todoLis().eq(idx))); | |
} | |
} | |
class Page { | |
static title() { | |
return cy.get("header h1"); | |
} | |
static table() { | |
return TodoTable; | |
} | |
} | |
describe("Page Objects TypeScript", () => { | |
it("table rows", () => { | |
cy.visit("https://example.cypress.io/todo"); | |
Page.title().should("have.text", "todos"); | |
Page.table().itemRowsFn((rows) => { | |
expect(rows.length).to.equal(2); | |
rows[0].name().should("have.text", "Pay electric bill"); | |
rows[0].isComplete((isComplete) => expect(isComplete).to.be.false); | |
rows[0].checkbox().click(); | |
rows[0].isComplete((isComplete) => expect(isComplete).to.be.true); | |
rows[0].hasClass("completed", (b) => expect(b, "should not have completed class").to.be.true); | |
}); | |
Page.table().rowWithData("Walk", (row) => { | |
row.name().should("have.text", "Walk the dog"); | |
}); | |
Page.table().rowAtIndex(1, (row) => { | |
row.name().should("have.text", "Walk the dog"); | |
row.isComplete((b) => expect(b).to.be.false); | |
row.hasClass("done", (b) => expect(b, "should not have done class").to.be.false); | |
row.hasClass("completed", (b) => expect(b, "should not have completed class").to.be.false); | |
}); | |
Page.table().itemRowsFn((rows) => { | |
console.log(rows.length); | |
}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment