change-element-style

Change Element's Style

Test Code: change-elements-style.js

This example shows how to modify an element's style from test code.

The change-elements-style.js file contains two tests. These tests use client functions to run code in the browser.

During the Hide an element test, the hidePopulateButton client function sets the #populate button's style.display CSS property to none. Before the function is called, the t.expect.ok assertion method verifies that the button is visible. After hidePopulateButton is executed, the t.expect.notOk assertion method ensures that the button is no longer displayed.

In the Change header color test, a client function modifies the h1 header's style.color to change its color to black. The t.expect.eql assertion methods verify that the element's color has changed. To obtain the color value, the selector's getStyleProperty method is used.

TestCafe API in This Example

• Test Structure:
  • Fixture.page Method
  • test Function
• Element Identification and Actions:
  • Selector Object
  • Selector.getStyleProperty Method
  • Selector.visible Property
• Assertion and Evaluation:
  • t.expect.eql Method
  • t.expect.ok Method
  • t.expect.notOk Method
• Custom Scripts:
  • ClientFunction Object