Mojolicious 测试：如何使用 css-selectors 获取输入值答案

【问题标题】：Mojolicious Tests: How to get the input value using css-selectorsMojolicious 测试：如何使用 css-selectors 获取输入值
【发布时间】：2014-10-17 06:58:40
【问题描述】：

我正在为 Mojolicious 应用程序编写一个测试，它会发送一些 HTML 表单数据，然后检查它们是否出现在后续的 get 请求中。

$t->post_ok('/intern/offer/edit'  => form  => {
      'angebotsdatum'    => '2014-02-22',
      'gastname'         => 'Hansi Hinterseer',
      'einmalkosten'     => '128.00',
      'tage'             => '9',
      'ankunft'          => '2014-01-01',
      'gesamtpreis'      => '764.00',
      'abfahrt'          => '2014-01-10',
      'tagespreis'       => '70.71',
      'apartments_id'    => 'HAG28',
      'id'               => '1',
      'aufenthaltspreis' => '636.39'
    }
)
->status_is(200)
->content_like( qr/Angbot bearbeiten/ )
;

$t->get_ok('/intern/offer/edit/1')
    ->status_is(200)
    ->text_like('html body h2' => qr/Intern - Angebote/ )
    ->text_like('html body h3' => qr/Angbot bearbeiten/ )
    ->text_is('html body form div#adatum label' => 'Angebotsdatum:' )
    ->text_is('html body form div#adatum input#angebotsdatum value'  => '2014-02-22' )
;

不幸的是，最后一次对输入元素值的测试失败了，因为返回的值总是空的。表单-label（此处为“Angebotsdatum:”）的测试成功。

如何从 HTML 表单中选择并取回输入元素 value？

表单的 HTML 代码是：

<div id="adatum">
    <label>Angebotsdatum:</label>
    <input type="text" name="angebotsdatum" value="2014-02-22" id="angebotsdatum">
</div>

这是测试输出：

#   Failed test 'exact match for selector "html body form div\#adatum input[name=angebotsdatum] value"'
#   at t/1210-workflow_booking.t line 80.
#          got: ''
#     expected: '2014-02-22'

所以我们可以清楚地看到，CSS 选择器返回空值。

【问题讨论】：

标签： html perl css-selectors mojolicious

【解决方案1】：

来自Test::Mojo

text_is - 首先检查 CSS 选择器的文本内容匹配 HTML/XML 元素以与 Mojo::DOM 中的 at 完全匹配。

at 方法

在 DOM 结构中找到与 CSS 选择器匹配的第一个元素，然后将其作为 Mojo::DOM 对象返回，如果没有则返回 undef 成立。支持 Mojo::DOM::CSS 中“SELECTORS”中的所有选择器。

还有

html body form div#adatum input#angebotsdatum value
                                             ^^^^^^ - this isn't valid

恕我直言，不是有效的 CSS 选择器。

你可以试试下一个（缩短的）选择器：

div#adatum > input[value="2014-02-22"]

所以找到属性等于2014-02-22的元素<input>。

E[foo="bar"] 一个 foo 属性值正好等于 bar 的 E 元素。

更多信息Mojo::DOM::CSS#SELECTORS

所以，用想要的值准确地测试元素的存在就足够了：

->element_exists('input[value="2014-02-22"]', '...');

Ps：我不是一个很有经验的 Mojo 开发者，所以...

【讨论】：

好眼光，jm666。我也不是一个非常有经验的 Mojo 开发者，但看起来不错。
这是一个有效的 CSS 选择器，它只是尝试以在有效 HTML 中没有意义的方式匹配元素。
@BoltClock 是的，应该说得更好-对于OP想要的目的和上下文无效..

【解决方案2】：

input#angebotsdatum 表示您正在寻找具有id=angebotsdatum 属性的<input> 元素，但您要寻找的是name=angebotsdatum 属性。所以我认为最后一个测试应该看起来像

->text_is('html body form div#adatum input[name=angebotsdatum] value' => ...)

【讨论】：

感谢您抽出宝贵时间回答！不幸的是，这并不能解决问题。输入元素具有angebotsdatum 的id 和name。我会尝试在我的问题中添加上面的 HTML 代码。