python - 如何获取 HTML 元素坐标？

Question

我想知道是否有一种方法可以在不在浏览器中打开页面的情况下获取 HTML 页面中 HTML 元素的坐标。 我正在使用 python，我看到你可以提取一些请求来获取 HTML 页面，之后，你可以使用 bs4 之类的模块在其中进行搜索，但我没有找到获取 HTML 页面的方法元素坐标，这可能吗？ (对于元素坐标，我指的是浏览器加载页面时元素的x pos 和y pos)

假设我想获取 this page 的 HTML 文本 我已经写了这个

import requests
from bs4 import BeautifulSoup

data = requests.get("https://www.nike.com")
soup = BeautifulSoup(data.text, 'html.parser')

element = soup.find('p',{'class':"vVtA7wL6 headline-sm-base text-color-primary-dark"})

print(element.coords) # exists/can I create in some way a module that returns the coords?

当元素在浏览器中显示时，有没有办法找到element.coords？

Answer 1

通常不可能，因为坐标取决于给定浏览器呈现它的精确方式。

但是您可以在 python 中打开一些浏览器，然后运行一个 javascript 来检索坐标并将其返回给 python。我们将使用 pywebview 作为浏览器(需要 pip3 install pywebview)。

打开浏览器窗口，使用 JavaScript 检查 HTML 元素，返回值，然后关闭浏览器窗口。请注意，这些值将取决于窗口大小。

import webview
from threading import Thread


def thread_fun():
  while webview.evaluate_js('document.readyState') != "complete":
    # wait for page to load
    time.sleep(0.5)

  # ask for a bounding rect
  bounding_rect = webview.evaluate_js('''
    document.querySelector("img.central-featured-logo").getBoundingClientRect()
  ''');  
  webview.destroy_window()

  print(bounding_rect)


thread = Thread(target=thread_fun)
thread.start()

webview.create_window(title="a title", url="http://wikipedia.org", width=500, height=700)

thread.join()

结果:{'x': 150, 'y': 176, 'width': 200, 'height': 183, 'top': 176, 'right': 350, 'bottom': 359 , '左': 150}

webview.create_window 必须在主线程中调用，它会阻塞它直到窗口被销毁。

有关 webview 包的详细信息，请参阅 https://pywebview.flowrl.com/