Components of a GUI test | Ranorex Webtestit User Guide
WebtestitUser GuideComponents of a GUI test

Components of a GUI test

Elements and selectors are the main components that make up a fully functioning test. They form the basis for automating your website or app. You could pretty much drop everything into a single test function and get started with your tests like the following example depicts:

@Test
public void checkCredentials() throws InterruptedException {
  By Username = By.cssSelector("#username");
  By Password = By.cssSelector("#password");
  By Login = By.cssSelector("[class='fa fa-2x fa-sign-in']");
  By ResultMessage = By.cssSelector("#flash");

  WebDriverWait wait = new WebDriverWait(driver, 10);

  // Open the Web Page
  driver.get("https://the-internet.herokuapp.com/login");

  // Attempt to log in
  wait.until(ExpectedConditions.visibilityOfElementLocated(Username)).sendKeys("username");
  wait.until(ExpectedConditions.visibilityOfElementLocated(Password)).sendKeys("password");
  wait.until(ExpectedConditions.visibilityOfElementLocated(Login)).click();

  // Capture the login message after clicking the button
  String resultMessage = wait.until(ExpectedConditions.visibilityOfElementLocated(ResultMessage)).getText().replaceAll("×", "").trim();

  Assert.assertEquals(resultMessage, "Your username is invalid!");
}
def test_check_credentials(self):
    driver = self.get_driver()

    username = (By.CSS_SELECTOR, "#username")
    password = (By.CSS_SELECTOR, "#password")
    login = (By.CSS_SELECTOR, "[class=\'fa fa-2x fa-sign-in\']")
    result_message = (By.CSS_SELECTOR, "#flash")

    wait = WebDriverWait(driver, 10)

    # Open the Web Page
    driver.get('https://the-internet.herokuapp.com/login')

    # Attempt to log in
    wait.until(EC.visibility_of_element_located(username)).send_keys("username")
    wait.until(EC.visibility_of_element_located(password)).send_keys("password")
    wait.until(EC.visibility_of_element_located(login)).click()

    # Capture the login message after clicking the button
    result = wait.until(EC.visibility_of_element_located(result_message)).text.replace("×", "").strip()

    self.assertEqual(result, "Your username is invalid!")
it('should check credentials', async () => {
  const username = by.css('#username');
  const password = by.css('#password');
  const login = by.css('[class=\'fa fa-2x fa-sign-in\']');
  const resultMessage = by.css('#flash');

  // Open the Web Page
  await browser.driver.get('https://the-internet.herokuapp.com/login');

  // Attempt to log in
  await browser.wait(ExpectedConditions.visibilityOf(element(username)), browser.allScriptsTimeout, username.toString());
  await element(username).sendKeys('username');
  await browser.wait(ExpectedConditions.visibilityOf(element(password)), browser.allScriptsTimeout, password.toString());
  await element(password).sendKeys('password');
  await browser.wait(ExpectedConditions.visibilityOf(element(login)), browser.allScriptsTimeout, login.toString());
  await element(login).click();

  // Capture the login message after clicking the button
  await browser.wait(ExpectedConditions.visibilityOf(element(resultMessage)), browser.allScriptsTimeout, resultMessage.toString());
  const result = await element(resultMessage).getText().then((m) => m.replace(/×/g, '').trim());

  await expect(result).toEqual('Your username is invalid!');
});

When you start with automation you may find that it’s sufficient to keep your tests simple and automate everything in one go. However, as the number of test cases increases, you might find it hard to maintain an overview in your code. That’s why tests are usually structured into multiple components.

Anatomy of a test file

The actual contents of a test file in Ranorex Webtestit differ from the automation framework you chose when creating your project. But even as terminology changes the concepts are widely the same.

Ranorex Term Protractor TestNG Annotation(s) unittest hooks Description
Test Test Suite Scenario Suite Test Suite A collection of test cases
Test case Test Test Test A single, self-contained orchestration of actions followed by an assertion. Can either pass or fail.
Setup beforeEach() beforeAll() @BeforeMethod @BeforeSuite @BeforeTest setUpClass() setUp() A function executed either before each test case, test suite or all tests.
Teardown afterEach() afterAll() @AfterMethod @AfterSuite @AfterTest tearDownClass() tearDown() A function executed either after each test case, test suite or all tests.

When executing your tests, Ranorex Webtestit treats each test file as a unit. You can choose between executing the current or all test files in your project. Keep this in mind when structuring your tests. 

Reference

For more information on test execution, click here.