如何在 img 标签的 src 属性上使用 web_mock 存根 headless_chrome 请求

Question

我正在尝试使用 Webmock 存根无头 chrome 请求。我只想测试以下内容：

给定一个 select 和一个轮播标签（轮播是使用 Swiper 实现的），如果我更改 select 标签，则轮播当前显示的图像必须相应更改。为此，我正在使用 VueJS。 jQuery 中的一个例子是：

$(document).on('load', function() {
  $('.current-carousel-image').src = "https://something.com/some-image"
})

如何将来自 src 属性的这些请求存根到 img 标签中？

我正在使用 Webmock，所以基本上我试过这个：

test 'test something' do
  stub_request(:any, /host.com.br/)
  visit products_path(product)

  [...]

  find('select[data-grass="material-filter"]').find(:xpath, 'option[2]').select_option

  [...]
end

host.com.br 提供我需要的图像的服务。

当我尝试使用 Net::HTTP 方法时，这似乎有效，但是，在我的系统测试中，请购单一直返回 400 状态（这是预期的，因为我正在使用 FactoryBot 生成数据我在被测试的页面中使用，但提供我使用的图像的服务是为我的生产数据库中的实际模型准备的）

Answer 1

你不能存根那些使用 WebMock 的。 WebMock 只能存根您的应用程序发出的请求 - 它不能对浏览器发出的请求做任何事情。

对于浏览器发出的stub/mock请求，您需要使用可编程代理。您可能想看看 PuffingBilly

如何在 img 标签的 src 属性上使用 web_mock 存根 headless_chrome 请求

How to stub headless_chrome requisitions with web_mock on src attributes on img tags

ruby-on-rails

system-testing

capybara

webmock