Test automation with typescript

Page object model

Our projects can vary from e-commerce sites to cloud enterprise software like SAP or NetSuite. Our scripting language of choice is Typescript. We found Typescripts syntax structure similar to Java, which makes it easy for any developer to understand. When approaching a project, we identify all the components that make up the software and individually organize them to be tested. We then continue to break down each component by identifying all of its objects in the DOM.

The script below is initializing selectors and their methods, which will eventually be imported into a test suite. All selectors and methods are designed to be written once and to be used in multiple test scenarios.

export class DeleteUser {
    //SELECTORS
    public readonly navCustomer = Selector('ul[class="mainnav"]')
      .find('span')
      .withText('Customers')

    public readonly colEmail = Selector('tr[class="even"]')
      .nth(0)
      .find('td')
      .child('a')
      .nth(1)
      .withText('@')

    public readonly dropActions = Selector(
      'a[class="btn btn-default btn-sm dropdown-toggle"]'
    ).withExactText('Actions')

    public readonly dropActionsdelete = Selector('ul[class="dropdown-menu"]')
      .find('a[data-confirm="This is not reversible."]')
      .withExactText('Delete')

    //METHODS
    public async removeUser () {
        await t
        // dialog box popup asking to confirm deletion set to true
        .setNativeDialogHandler(() => true)
        .click(this.navCustomer)
        .click(this.colEmail)
        .click(this.dropActions)
        .click(this.dropActionsdelete)
    }
}

Component testing

The component being tested below belongs to an ERP system. The component allows an administrator to delete multiple users at once. Our test runs a "beforeEach" function that signs into the admin account before each test is initiated. Once logged in, we're looping through five users at a time and deleting them from the database.

const patientApp = new PatientApp()
const deleteUser = new DeleteUser()
const getPageUrl = ClientFunction(() => window.location.href)

fixture('Delete users').beforeEach(async t => {
  await t.maximizeWindow()
  await patientApp.loginUser('username@user.com', 'password123')
})

test('Deleteing batch of users', async t => {
  // Looping to delete batch of 5 users
  for (let i = 0; i < 5; i++) {
    await deleteUser.removeUser()
  }
})