Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

core/tests/protractor/learnerFlow.js @AdityaDubey0
core/tests/protractor_utils/AdminPage.js @mridul-netizen #10954 #10831
core/tests/protractor_utils/ContributorDashboardPage.js @HarshKhilawala #10928 #10872
core/tests/protractor_utils/CollectionEditorPage.js @mridul-netizen #11126
core/tests/protractor_utils/ContributorDashboardTranslateTextTab.js @jnthn-sltn #11062 #11064
core/tests/protractor_utils/ExplorationEditorFeedbackTab.js @suryasiriki4 #11166
core/tests/protractor_utils/ExplorationPlayerPage.js @jimbyo #11301
core/tests/protractor_utils/CreatorDashboardPage.js @xarcode #11145
core/tests/protractor_utils/ExplorationEditorImprovementsTab.js @prayutsu #11619
core/tests/protractor_utils/PreferencesPage.js @HarshKhilawala #11669
core/tests/protractor_utils/GetStartedPage.js @prayutsu
core/tests/protractor_utils/SubscriptionDashboardPage.js @archi15
core/tests/protractor_utils/ProtractorConstants.js
core/tests/protractor_utils/ThanksPage.js @Garvnanwani
core/tests/protractor/profileMenuFlow.js @kishanhitk
core/tests/protractor_utils/LearnerDashboardPage.js @SAEb-ai
core/tests/protractor_utils/users.js @ashutoshc8101
core/tests/protractor_utils/general.js @shubhamkorde
core/tests/protractor/accessibility.js @FareesHussain
core/tests/protractor/libraryFlow.js @kishanhitk
core/tests/protractor_utils/ExplorationEditorHistoryTab.js @BxBxB
core/tests/protractor_utils/LibraryPage.js @taiwo2
core/tests/protractor_utils/ProfilePage.js @sajenjeshan1222 #12593
core/tests/protractor_utils/ExplorationEditorMainTab.js @EeshaArif #12700
core/tests/protractor_utils/ExplorationEditorSettingsTab.js @halsheik #12614
core/tests/protractor_utils/ExplorationEditorTranslationTab.js @mahendra1290 #13856
core/tests/protractor_utils/ClassroomPage.js @pankajdahiyapd #12670
core/tests/protractor_utils/ExplorationEditorPage.js @mohithk100 #13937
core/tests/protractor_utils/forms.js @sahiljoster32 #13924
core/tests/protractor_utils/TopicEditorPage.js @soumyo123-prog #13887
core/tests/protractor_utils/TopicsAndSkillsDashboardPage.js @ashish-patwal #14077
core/tests/protractor_utils/StoryEditorPage.js @ShivamJhaa #13931
core/tests/protractor_utils/workflow.js @KarishmaVanwari #14124
core/tests/protractor_utils/SkillEditorPage.js @mahendra1290 #14114