alnutile/business-selector-extension

Behat 的 CSS 选择器替换

0.9.2 2012-09-21 16:15 UTC

This package is auto-updated.

Last update: 2024-09-06 09:31:50 UTC


README

Build Status

介绍

--

原始项目可在此处查看 https://github.com/orangedigital/business-selector-extension

以下许多注释仍然适用。尽管它仍然可以扩展到其他项目,但我还是需要对其进行一些简化,以适应我正在使用的项目。

基本上,我不想在找不到令牌时抛出错误,因为它可以回退到用户使用的字符串,然后让 Behat 按需错误。

--

Behat 的 Mink 扩展是一个快速启动 Web 接受测试的绝佳方式。它允许用户使用常见的属性(如 'title'、'alt' 和 'value')在页面上指定 HTML 元素。一些步骤允许在 Gherkin 文件中内联使用 CSS 选择器。

虽然这种方法很棒,但它也有一些缺点

  1. 属性值可能并不总是最符合业务需求,并且可能会降低 Gherkin 场景的可读性。

  2. 有时无法使用 MinkExtension 提供的属性来识别元素。

  3. 通过在 Gherkin 文件中直接使用这些属性,它们与前端实现紧密耦合。Gherkin 应该表达业务需求而不是实现细节。

Behat 的业务选择器允许用户使用与 MinkExtension 提供的步骤非常相似的步骤,以业务术语描述页面上的元素。在运行测试时,业务术语将替换为在 yml 文件中维护的 CSS 选择器。

示例

使用 BusinessSelectorsExtension 提供的步骤编写的 Gherkin

Given I go to the page "Home Page" 
When I follow the link "Add Subscription"
And I fill in the "first name box" field with "ben"
Then the "first name box" form field should contain "ben"
And I press the "test" button
And the "Widget" should contain "Area One Text"

引号中的值映射到 behat.yml 中通过参数 'selectorFilePath' 配置的文件中的值。

Add Subscription: "a.self-link"
first name box: "form#name_form input[name=first_name]"
test: "form#name_form input[name=submit]"
Widget: div#user_widget

安装

通过使用 composer 安装上下文是最好的方式。

  1. 有关 Behat 安装说明,请参阅: behat.org

  2. 将以下内容添加到您要测试的项目中的 composer.json。

{   
    "minimum-stability": "dev",
    "require": {
        "behat/behat": ">v2.4@stable",
        "orangedigital/business-selector-extension": "*"
    }
}
  1. 将 OrangeDigital\BusinessSelectorExtension\Extension 部分添加到您的 behat.yml 文件中,如下例所示。
default:
    context:
        parameters:
            javascript_session: selenium
            browser: firefox
            show_cmd: open %s
    extensions:
        OrangeDigital\BusinessSelectorExtension\Extension:
          urlFilePath: urls.yml
          selectorFilePath: selectors.yml
          assetPath: path
          timeout: 30
          contexts:
            UIBusinessSelector: ~
        Behat\MinkExtension\Extension:
            base_url: "http://local.dev"
            default_session: goutte
            goutte: ~
            selenium: ~
            selenium2: ~
  1. 修改您的 FeatureContext 文件以使用 BusinessSelectorContext 文件。
<?php

use Behat\Behat\Context\ClosuredContextInterface,
    Behat\Behat\Context\TranslatedContextInterface,
    Behat\Behat\Context\BehatContext,
    Behat\Behat\Exception\PendingException;
use Behat\Gherkin\Node\PyStringNode,
    Behat\Gherkin\Node\TableNode;
use Behat\MinkExtension\Context\MinkContext,
    OrangeDigital\BusinessSelectorExtension\Context\BusinessSelectorContext;

class FeatureContext extends BehatContext
{
    public function __construct(array $parameters)
    {
        $this->useContext('mink', new MinkContext($parameters));
        $this->useContext('BusinessSelectors', new BusinessSelectorContext($parameters));
    }
}

安装:示例

通过将 'example/www' 中的 html 文件移动到本地 web 服务器的根目录或创建一个指向 'example/www' 的 vhost 来安装提供的示例。

编辑 'example/behat.yml' 中的 'base_url' 以指向上面的 Web 根 URL。

运行 ../bin/behat

##Business Selectors 提供的步骤

以下是业务选择器扩展提供的步骤列表。括号内的值表示任意业务友好的名称,这些名称应与相关配置文件(在 behat.yml 中通过 'urlFilePath' 和 'selectorFilePath' 指定)中的 CSS 选择器匹配。有关详细信息,请参阅提供的示例实现。

以下 URL 应放置在 behat.yml 中通过参数 "urlFilePath" 指定的 URLS 文件中

Given I go to the page "<PAGE NAME>" 
Given I attach "<FILE NAME> to <IMAGE INPUT>"

注意:这要求将 assetPath 配置为包含您的资源的相对目录(例如,assetPath: assets/)。文件名必须包含与文件关联的扩展名(例如,example.jpeg)。

以下所有CSS选择器应放置在behat.yml中通过参数"selectorFilePath"指定的CSS选择器文件中

When I follow the link "<LINK>"
When I click the "<CLICKABLE ELEMENT>"
When I press the "<BUTTON>" button
When I fill in the "<TEXT INPUT>" field with "value"
When the "<TEXT INPUT>" form field should not contain "value"
When I select "value" from the "<SELECT OR MULTISELECT>" selector
When I additionally select "value" from the "<MULTISELECT>" selector
When I check the "<CHECKBOX>" checkbox
When I uncheck the "<CHECKBOX>" checkbox
When I focus on the "<IFRAME (RELATES TO ID OR INDEX)>" iframe

注意:上述步骤是唯一一个选择器必须是ID的步骤。如果iframe没有ID,您可以提供iframe的索引,其中0代表第一个iframe,1代表第二个等。这个示例可以在example/features/example.feature中找到

When I refocus on the primary page
When I hover over "<PAGE ELEMENT>"
When I wait for the "<PAGE ELEMENT>" component to [dis]appear
Then the "<PAGE ELEMENT>" should contain "value"
Then the "<PAGE ELEMENT>" should not contain "value"
Then I should see "<PAGE ELEMENT>" component
Then I should not see "<PAGE ELEMENT>" component
Then "<PAGE ELEMENT>" should contain "<PAGE ELEMENT>"
Then "<PAGE ELEMENT>" should not contain "<PAGE ELEMENT>"
Then the "<CHECKBOX>" should be checked
Then the "<CHECKBOX>" should not be checked
Then the "<TEXT INPUT>" form field should contain "value"