开发Checkout Bot：如何检测页面上禁用的Add to Cart按钮？

问题背景 #

我正在开发一款Checkout Bot，需要用Pandas DataFrame输出商品标题及库存状态。目前已能正常打印商品标题，但区分商品是否缺货的唯一标识是禁用状态的Add to Cart按钮（所有商品位于同一页面）。

禁用按钮的HTML结构 #

<div class="StyledButtonWrapper-sc-1h3ts0h-0 gOOwkr">
  <button type="button" disabled="" class="StyledButton-sc-140xkaw-1 iAEEJh StyledButton-sc-1bveayl-0 gvJvME" data-test="a2c-Button">
    <div width="24" height="24" class="Icon-sc-1vrq823-0 iMdSTb">
      <svg width="32" height="32" viewBox="0 0 24 24">
        <path d="M20 20a2 2 0 1 1-2-2 2 2 0 0 1 2 2zM8 18a2 2 0 1 0 2 2 2 2 0 0 0-2-2zM21.5 4H5.72l-.56-1a2 2 0 0 0-1.74-1H2.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h.92l4.28 7.49a2.19 2.19 0 0 0 .27.35l-1.86 3.7a.77.77 0 0 0 0 .71l.22.38A.76.76 0 0 0 7 17h12.5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H8.62l1-2.09a2.74 2.74 0 0 0 .64.09h6.23A2.94 2.94 0 0 0 19 11.49l2.35-4.13A4.76 4.76 0 0 0 22 5v-.5a.5.5 0 0 0-.5-.5z"></path>
      </svg>
    </div>
  </button>
</div>

可用按钮的HTML结构 #

<div class="StyledButtonWrapper-sc-1h3ts0h-0 gOOwkr">
  <button type="button" class="StyledButton-sc-140xkaw-1 yIKjw StyledButton-sc-1bveayl-0 gvJvME" data-test="a2c-Button">
    <div width="24" height="24" class="Icon-sc-1vrq823-0 iMdSTb">
      <svg width="32" height="32" viewBox="0 0 24 24">
        <path d="M20 20a2 2 0 1 1-2-2 2 2 0 0 1 2 2zM8 18a2 2 0 1 0 2 2 2 2 0 0 0-2-2zM21.5 4H5.72l-.56-1a2 2 0 0 0-1.74-1H2.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h.92l4.28 7.49a2.19 2.19 0 0 0 .27.35l-1.86 3.7a.77.77 0 0 0 0 .71l.22.38A.76.76 0 0 0 7 17h12.5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H8.62l1-2.09a2.74 2.74 0 0 0 .64.09h6.23A2.94 2.94 0 0 0 19 11.49l2.35-4.13A4.76 4.76 0 0 0 22 5v-.5a.5.5 0 0 0-.5-.5z"></path>
      </svg>
    </div>
  </button>
</div>

现有可运行代码 #

items = soup.find('div', {'class': 'StyledRow-x4c83j-0 koBzMt'})

print(len(items.findAll('div', {'class': 'StyledCardWrapper-sc-1j5kbg6-0 cOnriV'})))
for item in items.findAll('div', {'class': 'StyledCardWrapper-sc-1j5kbg6-0 cOnriV'}):
    item_title = item.find('p', {'class': 'BaseTypo-sc-1jga2g7-0 izkVco StyledInfoTypo-sc-1jga2g7-1 doYUxh'})
    print(item_title.text)

解决方案 #

核心逻辑是在遍历每个商品卡片时，定位到对应的Add to Cart按钮，检查disabled属性是否存在，以此判断库存状态，最后将数据存入Pandas DataFrame。

修改后的完整代码 #

import pandas as pd

# 假设soup已经是解析好的BeautifulSoup对象
items_container = soup.find('div', {'class': 'StyledRow-x4c83j-0 koBzMt'})
items = items_container.findAll('div', {'class': 'StyledCardWrapper-sc-1j5kbg6-0 cOnriV'})

# 准备存储商品数据的列表
product_data = []

for item in items:
    # 获取商品标题
    item_title = item.find('p', {'class': 'BaseTypo-sc-1jga2g7-0 izkVco StyledInfoTypo-sc-1jga2g7-1 doYUxh'}).text
    # 定位Add to Cart按钮（用data-test属性更稳定，避免类名动态变化）
    add_to_cart_btn = item.find('button', {'data-test': 'a2c-Button'})
    # 判断库存状态：检查按钮是否有disabled属性
    stock_status = "缺货" if add_to_cart_btn.has_attr('disabled') else "有货"
    # 将数据添加到列表
    product_data.append({
        '商品标题': item_title,
        '库存状态': stock_status
    })

# 转换为Pandas DataFrame并打印
df = pd.DataFrame(product_data)
print(df)

关键说明 #

• 使用data-test="a2c-Button"定位按钮比依赖类名更可靠，因为前端框架生成的类名（如StyledButton-sc-140xkaw-1）可能随版本更新变化
• 通过has_attr('disabled')直接检查按钮是否包含禁用属性，这是判断状态的最直接方式
• 先收集所有商品数据到列表，再一次性转换为DataFrame，比逐个添加更高效

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