使用Jsoup爬取网页二维码图片src属性返回空字符串问题咨询

问题表现 #

爬取指定支付页面的二维码图片src属性时，执行elements.attr("src")语句控制台仅输出空字符串""。

• 目标页面地址：https://app.ethiomobilemoney.et:2121/ammwebpay/#/?transactionNo=202207131604471547205398120337410
• 问题代码：

private class description_webscrape extends AsyncTask<Void,Void,Void> {
    @Override
    public Void doInBackground(Void... voids) {
        Document document = null;
        try {
            document = Jsoup.connect("https://app.ethiomobilemoney.et:2121/ammwebpay/#/?transactionNo=202207131604471547205398120337410").get();
        } catch (IOException e) {
            e.printStackTrace();
        }

        Elements elements = document.selectXpath("/html/body/div/div/div[2]/div/div[1]/div/div/div[2]/div/div/div[1]/div/img");
        System.out.println(elements.attr("src"));
    }
}

问题原因 #

1. URL中#标识的是前端hash路由片段，HTTP请求本身不会携带#及之后的内容发送给服务端，Jsoup请求该地址拿到的只是站点入口的基础静态HTML，和当前交易单的内容无关。
2. 该站点是单页应用，所有业务内容包括二维码图片，都是浏览器加载完页面JS后动态渲染生成的。Jsoup仅能解析静态HTML源码，没有执行JavaScript的能力，返回的DOM结构里根本不存在XPath匹配的img节点，空集合调用attr()方法默认返回空字符串。
3. 使用的全路径绝对XPath容错性极低，页面DOM结构只要有微小调整（比如新增一层包裹容器）就会直接匹配失效。

解决方法 #

• 通过浏览器开发者工具抓包，找到页面加载时拉取二维码信息的后端接口，直接请求接口获取二维码数据，这种方式稳定性最高。
• 若必须从渲染后的页面提取内容，更换为支持JS执行的爬虫工具，等页面渲染完成后再做DOM解析。
• 提取属性前先校验匹配结果：打印elements.size()确认命中目标元素后再取值，提前排查匹配失效问题。
• 元素选择优先使用id、专属class等稳定属性编写选择器，不要直接复制浏览器生成的绝对全路径XPath。

内容的提问来源于stack exchange，提问作者JOWMIND