Селен (Питон) + Реакция

Question

Я пытаюсь использовать Selenium WebDriver (в Python) для автоматизации тестирования некоторого кода React (изучение BDD), и у меня возникает странная проблема с небольшим количеством тестирования, которое я пытаюсь сделать.

Я написал небольшое приложение с компонентом счетчика. Там немного текста, затем одна кнопка увеличивается на одну, а другая уменьшается.

Вот тестируемый компонент счетчика:

import React from 'react';

type CounterState = {
    counter: number
}

export default class Counter extends React.Component<{}, CounterState> {

    constructor(props: any) {
        super(props);
        this.state = {
            counter: 5
        }
    }

    handleIncrease(event: any) {
        this.setState({
            counter: this.state.counter + 1
        })
    }

    handleDecrease(event: any) {
        this.setState({
            counter: this.state.counter - 1
        })
    }

    render() {
        return (
            <div>
                <h2 id="counterText">Counter: { this.state.counter }!</h2>
                <button
                    id="incButton"
                    onClick = { e => this.handleIncrease(e) }
                >Increase Counter</button>
                <button
                    id="decButton"
                    onClick = { e => this.handleDecrease(e) }
                >Decrease Counter</button>
            </div>
        )
    }

}

Это файл Gherkin .feature для теста Selenium:

Feature:  Counter Test
    Scenario: Open Counter Page
        Given the counter page is not loaded
        When we click the counter navigation link
        Then the counter page is loaded
        And the counter state has the correct default
    Scenario: Increase Counter via Button
        Given the counter starts at 5
        When we click the button to increase the counter
        Then the counter now has increased by one
    Scenario: Decrease Counter via Button
        Given the counter starts at 6
        When we click the button to decrease the counter
        Then the counter has now decreased by one

... а вот и Питон. Мы используем драйвер Firefox (gecko driver) для нашего тестирования, которое я передаю в определения шагов через правильно настроенный файл environments.py в нашем каталоге features/.

from behave import given, when, then, step

@given('the counter page is not loaded')
def step_impl(context):
    context.driver.get("http://localhost:1234")
    assert "/counter" not in context.driver.current_url

@when('we click the counter navigation link')
def step_impl(context):
    link = context.driver.find_element_by_id("counterLink")
    context.actions.click(link).perform()

@then('the counter page is loaded')
def step_impl(context):
    element = context.driver.find_element_by_id("counterText")
    assert "Counter:" in element.text

@then('the counter state has the correct default')
def step_impl(context):
    element = context.driver.find_element_by_id("counterText")
    assert "5" in element.text

@given('the counter starts at 5')
def step_impl(context):
    element = context.driver.find_element_by_id("counterText")
    assert "5" in element.text

@when('we click the button to increase the counter')
def step_impl(context):
    button = context.driver.find_element_by_id("incButton")
    context.actions.click(button).perform()

@then('the counter now has increased by one')
def step_impl(context):
    element = context.driver.find_element_by_id("counterText")
    assert "6" in element.text

@given('the counter starts at 6')
def step_impl(context):
    element = context.driver.find_element_by_id("counterText")
    assert "6" in element.text

@when('we click the button to decrease the counter')
def step_impl(context):
    button = context.driver.find_element_by_id("decButton")
    context.actions.click(button).perform()

@then('the counter has now decreased by one')
def step_impl(context):
    element = context.driver.find_element_by_id("counterText")
    assert "5" in element.text

Проблема, с которой я сталкиваюсь, заключается в том, что событие щелчка в тесте увеличения срабатывает дважды, что приводит к сбою теста уменьшения, так как он не начинается с ожидаемого значения.

Похоже, что тест кнопки увеличения пройден, затем он нажимает кнопку дополнительно после ПОСЛЕ прохождения, а затем продолжает работу. Я не уверен, почему происходит этот дополнительный щелчок ...

Есть идеи?

Answer 1

Когда вы используете actions, то есть webdriver.ActionChains, вам сначала нужно набрать move_to_element(), чтобы щелкнуть по нему с помощью ActionChains.

Как пример:

my_element = context.driver.find_element_by_id("someid")
webdriver.ActionChains(context.driver).move_to_element(my_element).click(my_element).perform()

В вашем случае, как @ supputuri , упомянутое в комментариях, вам не нужно использовать ActionChains, вместо этого используйте element.click() следующим образом:

button = context.driver.find_element_by_id("decButton")
button.click()

Надеюсь, вы найдете это полезным!