javascript – Rspec&Capybara：将焦点设置为使用jQuery的元素不适用于`：focus` CSS

我的网页中有盲人和键盘用户的跳转链接,它们被移出视口以隐藏视觉;当他们获得关注时,他们被移动到视口中.

我想使用RSpec和Capybara来测试这个行为,但是它以某种方式不起作用.

it 'moves the focus to the navigation when activating the corresponding link',js: true do
    expect(page).not_to have_css '#main:focus'
    page.evaluate_script "$('#jump_to_content > a').focus()"
    click_link 'Jump to content'
    expect(page).to have_css '#main:focus'
  end

evaluate_script中的JavaScript似乎没有被正确执行.我在Chrome控制台中尝试使用相同的JS($(‘#jump_to_content> a’).focus()),我不知道该结果,因为在控制台中,链接不显示,但是当点击浏览器视图时,它会显示一秒钟的一部分,并再次消失(它会消失,因为它没有焦点了).在我看来,它应该在执行JS后直接显示.

这让我有点不安全.任何帮助是非常感谢.

更新

我同时得出结论,Chrome的行为是正常的：焦点保留在控制台中,因此该元素实际上并没有真正获得焦点并且不显示.

我也得出结论,水豚似乎无法正确处理聚焦元素(并应用：焦点样式).

我创建了以下CSS规则：

一个#jump_to_navigation
颜色：黑色

&:focus
  color: red

为了测试这个,我已经设置了这个非常具体的测试：

visit root_path

selector = 'a#jump_to_navigation'

# Initial style
expect(page.evaluate_script('document.activeElement.id')).to eq ''                  # Make sure the link isn't focused yet
expect(page.evaluate_script("$('#{selector}').css('color')")).to  eq 'rgb(0,0)' # Color initially is black

# Set focus
page.evaluate_script("$('#{selector}').focus()")

# Focused style
expect(page.evaluate_script('document.activeElement.id')).to eq 'jump_to_navigation'  # Make sure the link is focused Now
expect(page.evaluate_script("$('#{selector}').css('color')")).to  eq 'rgb(255,0)' # Color is Now red

测试如下所示：

1) Navigation jump links visually displays them only on focus
   Failure/Error: expect(page.evaluate_script("$('#{selector}').css('color')")).to  eq 'rgb(255,0)' # Color is Now red

     expected: "rgb(255,0)"
          got: "rgb(0,0)"

     (compared using ==)

所以焦点设置正确,但是：不适用焦点样式.我猜这是PhantomJS的一个问题？

我很乐意为您解决这个问题.

解决方法

这对我来说,首先在页面上可以看到一个元素.我不得不使用它作为一些拖放测试的前身.

page.execute_script("document.getElementById('foo').scrollIntoView()")

原文地址：https://www.jb51.cc/jquery/151737.html