我想使用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的一个问题？

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