RSpec 失败，因为 URL 被转义

Question

将 Rails 项目中的 RSpec 从使用 Poltergeist 转移到使用 Selenium (Webdriver) Chrome，现在我遇到了一些我不太期待的失败。看起来它出于某种原因试图转义 URL？想法？

Failures:

  1) Story editing private story should be read after editing
     Failure/Error: expect(story_cover_image).to eq "#{url}/convert?rotate=exif"

       expected: "http://placehold.it/edited.png/convert?rotate=exif"
            got: "\"http://placehold.it/edited.png/convert?rotate=exif\""

       (compared using ==)

这是规范（删除了不相关的内容）：

feature 'Story editing', type: :feature, js: true do
  ...
  let(:story_attributes) do
    {
      ...
      cover_image: {
        url: 'http://placehold.it/edited.png'
      }
    }
  end

  ...

  def fill_file_url(url)
    execute_script <<-JS
      angular.element(".content").scope().story.addCoverImage();
      angular.element(".content").scope().story.coverImage.url = "#{url}";
      angular.element(".content").scope().story.save();
    JS

    expect(story_cover_image).to eq "#{url}/convert?rotate=exif"
  end

  ...

  def fill_in_story_form(story)
    fill_file_url story[:cover_image][:url] if story[:cover_image]
  end

  ...

  context 'private' do
    scenario 'story should be read after editing' do
      fill_in_story_form story_attributes            <<<<<< SPEC FAILS ON THIS LINE >>>>>
      ...
    end
  end

编辑根据请求将"#{url}" 更改为#{url} 后出现新故障：

也试过了：angular.element(".content").scope().story.coverImage.url = url;

  1) Story editing private story should be read after editing
     Failure/Error:
           execute_script <<-JS
             angular.element(".content").scope().story.addCoverImage();
             angular.element(".content").scope().story.coverImage.url = #{url};
             angular.element(".content").scope().story.save();
           JS

     Selenium::WebDriver::Error::UnknownError:
       unknown error: Runtime.evaluate threw exception: SyntaxError: Unexpected token :
         (Session info: chrome=69.0.3497.100)
         (Driver info: chromedriver=2.41.578706 (5f725d1b4f0a4acbf5259df887244095596231db),platform=Mac OS X 10.13.6 x86_64)

Answer 1

问题出在这一行：

angular.element(".content").scope().story.coverImage.url = "#{url}";

因为在 HEREDOC 内部，所有内容都被视为字符串 #{url} 是您进行字符串插值所需的全部内容。但在这种情况下，您希望将插值视为 Javascript 字符串，因此您应该使用 '#{url}'。执行"#{url}" 会创建转义双引号，因为默认情况下是HEREDOC follows double-quoting rules，因此您应该在HEREDOC 中将所有双引号更改为单引号。

在你得到的 irb 控制台中直接尝试：

url = "https://www.google.com"
<<-JS
  angular.element('.content').scope().story.coverImage.url = '#{url}';
JS
=> "angular.element('.content').scope().story.coverImage.url = 'https://www.google.com';\n";

<<-JS
  angular.element(".content").scope().story.coverImage.url = '#{url}';
JS
=> "angular.element(\".content\").scope().story.coverImage.url = 'http://www.google.com';\n"

Quoting rules of Heredoc docs