Cucumber scenario - correct scenario

Question

I am trying to improve my cucumber scenarios (BDD)

Lets say we have website, that can be in 3 states, and based on this state, it has different web elements in the page.

How would you write cucumber scenario making it as close to BDD methodologies, as simple to understand?

Currently I have:

  Scenario Outline: View page in <PAGE STATE> state
    Given I opened page in <PAGE STATE> state
    Then I should see "<AVAILABLE ELEMENTS>
    Examples:
      | PAGE STATE | AVAILABLE ELEMENTS                                         |
      | State1     | Value input, Default slider, Active slider,                |
      | State2     | Value input, Default slider, Active slider, Type dropdown  |
      | State3     | Value input, Default slider, Active slider, Image uploader |

Answer 1

I would not recommend a scenario outline for all page states. You want each scenario to focus tightly on the thing you are asserting. For instance, the image uploader should be its own scenario:

Scenario: Users can upload an image when things are foobarred
    # One or more `Given` steps to put the system into the correct state
    Given a foo exists
    And bar has happened
    And a baz has been foobarred
    When I am viewing the page
    Then I should be able to upload an image

And a sample step making the assertion:

[Then(@"I (should|should not) be able to upload an image")]
public void ThenIShouldBeAbleToUploadAnImage(string assertion)
{
    bool isFound = false;

    try
    {
        var element = driver.FindElement(By.Css("input[type='file']"));

        isFound = true;
    }
    catch (NoSuchElementException)
    {
        // do nothing
    }
    catch (WebDriverTimeoutException)
    {
        // do nothing
    }

    if (assertion == "should")
    {
        // Assert isFound is true
    }
    else
    {
        // Assert isFound is false
    }
}

The scenario name clearly states a narrow test case. Each state of the page is clearly defined in the Given steps for this scenario. It also has only one assertion, and therefore only one reason this scenario should ever fail (the image upload field is not present).

You want your scenarios to focus on a single behavior. Your steps should not be describing the technical details of a page or screen, and instead should describe what the user is doing. You shouldn't assert that the upload field is visible. You should assert you are able to upload an image and have the step definition take care of finding the image upload field.

See BDD 101: Writing Good Gherkin for more advice on how to write good steps that describe behavior rather than a step by step process to accomplish a task.