Skip to content

Fixing End-to-End Tests with action.js and waitFor.js #10798

New issue
Jump to bottom
New issue
Jump to bottom
Closed
Closed
Fixing End-to-End Tests with action.js and waitFor.js#10798
Labels
good first issue
@U8NWXD

Description

@U8NWXD
U8NWXD
opened on Sep 27, 2020

Introduction

Background

To ensure Oppia remains available and high-quality for our students, we run end-to-end tests on all PRs to check that the site's functionality hasn't been broken. Recently, these tests have begun failing non-deterministically. This frustrates developers and slows their work by incorrectly indicating that developers’ changes are faulty. The goal of this issue is to help resolve these failures, also known as "flakes," by fixing common bad patterns in the current tests.

Getting Started

Review the instructions below on how to fix the tests. Then message on the issue thread asking to be assigned to one of the unclaimed files. We will assign you to the file by adding your username next to the file listing. If you have any questions, message on the issue thread, and we'll help you out!

How to Fix Tests

For this task, we would like you to pick one of the files listed below and make the following fixes wherever applicable:

  • Instead of calling .click() on an element, use action.click() from action.js
    • Here's an example (link): 
      - await element(by.css('.protractor-test-interaction')).click();
+ var testInteractionButton = element(by.css('.protractor-test-interaction'));
+ await action.click('Test Interaction Button', testInteractionButton);
    • Sometimes there might be a waitFor statement before the .click() call to make sure the element has loaded before we click it. These can be removed because action.click includes waitFor statements.
  • Instead of calling .getText() on an element, use action.getText() from action.js
    • Here's an example: 
      - var text = await element(by.css('.protractor-test-interaction-name')).getText();
+ var interactionNameElement = element(by.css('.protractor-test-interaction-name'));
+ var text = await action.getText('Interaction name element', interactionNameElement);
    • Sometimes there might be a waitFor statement before the .getText() call to make sure the element has loaded before we get its text. These can be removed because action.getText includes waitFor statements.
  • Instead of calling .clear() on an element, use action.clear() from action.js
    • Here's an example (link): 
      - await stateNameInput.clear();
+ await action.clear('State Name input', stateNameInput);
      Note that the diff above is simplified from the linked PR for clarity.
    • Sometimes there might be a waitFor statement before the .clear() call to make sure the element has loaded before we click it. These can be removed because action.clear includes waitFor statements.
  • Instead of calling .sendKeys() on an element, use action.sendKeys() from action.js
    • Here's an example (link): 
      - await stateNameInput.sendKeys(name);
+ await action.sendKeys('State Name input', stateNameInput, name);
      Note that the diff above is simplified from the linked PR for clarity.
    • Sometimes there might be a waitFor statement before the .sendKeys() call to make sure the element has loaded before we click it. These can be removed because action.sendKeys includes waitFor statements.
  • Use functions from waitFor.js to verify that elements have loaded before interacting with them:
    • Here's an example(link): 
      + await waitFor.visibilityOf(languageSelectorLabelElement,
+  'Language selector label element taking too long to appear');
  expect(await languageSelectorLabelElement.getText()).toBe(
    'Translations for language:');
    • Guidelines on finding out which elements need waitFor.js function calls: Please add waitFor statements before any code that requires an element to be present. For example, we need to wait for the element to be present before getting an element's text. In some cases you might not be able to just wait for the element to appear because the test is checking whether that element is present. In these cases, you can wait instead for another element that loads at the same time. Err on the side of adding unnecessary waitFor statements if you're unsure.

For more guidance, see our wiki page

Tests to Fix

Finished Files

Note: For a guide on how to access Oppia's webpages, see this.

Metadata

Assignees

No one assigned

    Labels

    good first issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions