Test naming conventions in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

Why are test naming conventions important in Cypress?

They help keep tests clear and easy to understand, making it simple to know what each test does without reading all the code.

beginner

What is a good format for naming Cypress test files?

Use lowercase letters with words separated by dashes, like login-form.spec.js, to keep names readable and consistent.

beginner

How should individual test names be written inside Cypress it() blocks?

Write test names as clear, descriptive sentences starting with a verb, for example: it('shows error message when password is empty').

beginner

What is a common mistake to avoid when naming tests?

Avoid vague names like test1 or check. They don’t explain what the test does and make debugging harder.

intermediate

How can consistent test naming improve teamwork?

When everyone uses the same naming style, team members can quickly find and understand tests, making collaboration smoother.

Which of these is the best Cypress test name inside an it() block?

A it('test1')

B it('logs in user with valid credentials')

C it('check login')

D it('login')

Option B clearly describes what the test does, making it easy to understand.

How should Cypress test file names be formatted?

A loginformtest.js

B login_form_test.js

C LoginFormTest.js

D login-form.spec.js

Using lowercase with dashes and the .spec.js suffix is a common and clear convention.

Why avoid vague test names like 'test1'?

A They are too long

B They cause syntax errors

C They don’t explain what the test does

D They run slower

Vague names make it hard to know the test’s purpose, which slows debugging.

What is a benefit of consistent test naming in a team?

A Team members find and understand tests easily

B Tests use less memory

C Tests run faster

D Tests don’t need comments

Consistent naming helps everyone quickly find and understand tests.

Which verb is best to start a Cypress test name?

A Shows

B Check

C Test

D Run

Starting with a verb like 'shows' describes the expected behavior clearly.

Explain why clear and consistent test naming is important in Cypress testing.

Think about how you find a file or a note when you need it fast.

Describe best practices for naming Cypress test files and individual test cases.

Imagine you are writing a label that tells exactly what’s inside.

Practice

1. Why is it important to use clear and descriptive names in Cypress test cases?

easy

A. Because long names make tests run faster

B. Because clear names help everyone understand what the test does quickly

C. Because unclear names reduce the number of tests needed

D. Because test names affect the browser rendering speed

Solution

1. Step 1: Understand the purpose of test names

   Test names describe what the test checks, so clear names help everyone understand the test purpose quickly.

2. Step 2: Evaluate the options

   Only Because clear names help everyone understand what the test does quickly correctly states the importance of clear names. Options A, C, and D are incorrect because test names do not affect speed or test quantity.

3. Final Answer:

   Because clear names help everyone understand what the test does quickly -> Option B

4. Quick Check:

   Clear descriptive names improve communication [OK]

Hint: Think: Can a friend understand the test name easily? [OK]

Common Mistakes:

• Assuming longer names make tests faster
• Believing test names affect browser performance
• Ignoring the importance of clarity in names

2. Which of the following is the correct syntax to name a test case in Cypress?

easy

A. describe it 'homepage loads' () => { /* test code */ }

B. test it 'homepage loads' { /* test code */ }

C. it('should load the homepage', () => { /* test code */ })

D. it: 'homepage loads' { /* test code */ }

Solution

1. Step 1: Recall Cypress test syntax

   Cypress uses the it function with a string name and a callback function to define a test case.

2. Step 2: Check each option

   it('should load the homepage', () => { /* test code */ }) matches the correct syntax. Options B, C, and D have invalid syntax or misplaced keywords.

3. Final Answer:

   it('should load the homepage', () => { /* test code */ }) -> Option C

4. Quick Check:

   Correct it syntax = it('should load the homepage', () => { /* test code */ }) [OK]

Hint: Remember: it('name', () => {}) is correct syntax [OK]

Common Mistakes:

• Using incorrect keywords like 'test it' or 'describe it'
• Missing parentheses or arrow functions
• Using colons instead of parentheses

3. Given the following Cypress test code, what will be the test name shown in the test report?

describe('Login Page', () => {
  it('accepts valid credentials', () => {
    // test steps
  })
})

medium

A. Login Page accepts valid credentials

B. accepts valid credentials

C. Login Page

D. describe Login Page it accepts valid credentials

Solution

1. Step 1: Understand how Cypress combines test names

   Cypress combines the describe block name and the it test name separated by a space for the full test name.

2. Step 2: Combine the strings

   The describe is 'Login Page' and the it is 'accepts valid credentials', so combined they form 'Login Page accepts valid credentials'.

3. Final Answer:

   Login Page accepts valid credentials -> Option A

4. Quick Check:

   Full test name = describe + it [OK]

Hint: Test name = describe block + it block text [OK]

Common Mistakes:

• Choosing only the it block name
• Choosing only the describe block name
• Including keywords like 'describe' or 'it' in the name

4. Identify the problem in this Cypress test naming and fix it:

describe('User Login')
it('should login successfully', () => {
  // test code
})

medium

A. Missing curly braces {} after describe block

B. The it block name is too long

C. describe should be replaced with test

D. The test code should be inside a function named loginTest

Solution

1. Step 1: Check describe block syntax

   The describe block must have curly braces {} to wrap its content, but here it is missing.

2. Step 2: Fix the syntax

   Add curly braces after describe('User Login') to include the it block inside it.

3. Final Answer:

   Missing curly braces {} after describe block -> Option A

4. Quick Check:

   describe block needs {} [OK]

Hint: Always wrap describe content in curly braces {} [OK]

Common Mistakes:

• Ignoring missing braces causing syntax errors
• Thinking test names length causes errors
• Replacing describe with test incorrectly

5. You want to write Cypress tests for a shopping cart feature. Which test naming approach follows best practices for clarity and organization?

hard

A. describe('Shopping Cart', () => { it('should do stuff') it('should do other stuff') it('should do more stuff') })

B. describe('Cart Tests', () => { it('test1') it('test2') it('test3') })

C. describe('Shopping Cart', () => { it('adds item') it('removes item') it('updates quantity') })

D. describe('Shopping Cart Feature', () => { it('adds item to cart successfully') it('removes item from cart') it('updates item quantity correctly') })

Solution

1. Step 1: Evaluate clarity of describe and it names

   describe('Shopping Cart Feature', () => { it('adds item to cart successfully') it('removes item from cart') it('updates item quantity correctly') }) uses clear, descriptive names for both the describe block and each it test, explaining exactly what each test does.

2. Step 2: Compare with other options

   Options B, C, and D use vague or incomplete test names that do not clearly communicate test purpose.

3. Final Answer:

   describe('Shopping Cart Feature', () => { it('adds item to cart successfully') it('removes item from cart') it('updates item quantity correctly') }) -> Option D

4. Quick Check:

   Clear, descriptive names improve test readability [OK]

Hint: Use full descriptive names in describe and it blocks [OK]

Common Mistakes:

• Using vague test names like 'test1' or 'should do stuff'
• Skipping descriptive details in test names
• Using inconsistent naming styles