Naming Things

Controllers

Controllers filenames should be named fooBar.controller.js, where fooBar is a descriptive name for what it does.

Similarly, the class name for he controller should be FooBarController.

Actions

Actions/function names can be generally whatever you like as long as it is clear and descriptive to what it does. Don't be afraid to fully describe something versus using abbreviations.

Page Objects

By default, all page objects should be named like fooBar.page.js, where fooBar is a descriptive name for what it is.

Optionally, instead of page, you could use a name like modal or panel to better describe what the "page object" is. For example, you could have fooBar.modal.js or fooBar.panel.js. If you go this route, make sure to name the class appropriately. page's should be FooBarPage while modals should be FooBarModal, for example.

Elements

Elements should typically end with what they are if it makes sense. The general idea is that we don't want to clash with our actions vs the elements the actions use.

For example, say we had an element (a button) we named login. Then what if we had an action on this same page object that we named login as well (let's ignore the fact that we have an actual name collision).

In our login function it looks like this:

login() {
  this.doStuff()
  this.login().click()
  this.waitForThings()
}

To me, it's not super clear what the login function call inside our login function IS. So, if it's a button it should be named loginButton.

Actions

Actions/function names can be generally whatever you like as long as it is clear and descriptive to what it does. Don't be afraid to fully describe something versus using abbreviations.

Tests

Test should always end in .test.js. For example, fooBar.test.js. If the test is considered a "journey", it should be fooBar.journey.test.js.