web自动化——简单的百度首页左上角点击跳转

from selenium import webdriver
from selenium.webdriver.common.by import By
from time import sleep


class Test_bd():
    def test_baidu(self):
        driver = webdriver.Chrome()
        driver.get("https://www.baidu.com/")
        driver.implicitly_wait(5)
        div_path = "//*[@id='s-top-left']"
        div_ele = driver.find_element(By.XPATH,div_path)
        a_list = div_ele.find_elements(By.XPATH, "./a")  # 找到左侧顶部栏所有a标签
        for i in range(1, len(a_list) + 1):
            a_xpath = div_path + f"/a[{i}]"
            a_ele = driver.find_element(By.XPATH,a_xpath)
            a_text = a_ele.text
            a_ele.click()
            print(f"***   a标签:{a_text}   ****")
            driver.switch_to.window(driver.window_handles[-1])
            # driver.implicitly_wait(3)
            sleep(2)
            driver.close()
            driver.switch_to.window(driver.window_handles[0])
            sleep(2)

执行结果:

### 实现自定义导航栏中的胶囊按钮返回功能和首页小房子图标路由跳转 在前端开发中,通过 JavaScript 和 HTML 的组合可以轻松实现自定义导航栏的功能。以下是具体方法: #### 胶囊按钮的返回功能 要实现左上角胶囊按钮的返回功能,可以通过监听点击事件并调用 `history.back()` 方法来完成页面回退操作[^1]。 ```javascript document.querySelector('.back-button').addEventListener('click', function() { history.back(); // 返回到前一页 }); ``` 上述代码片段中,`.back-button` 是胶囊按钮的 CSS 类名。当用户点击该按钮时,浏览器会执行历史记录回退动作。 #### 首页小房子图标的路由跳转 对于首页小房子图标的路由跳转,通常需要指定目标路径并通过编程方式触发跳转。如果项目基于单页应用框架(如 Vue.js 或 React),则可利用其内置的路由库;如果是纯静态网页,则可以直接修改地址栏 URL 并刷新页面。 ##### 使用原生 JavaScript 进行跳转 ```javascript document.querySelector('.home-icon').addEventListener('click', function() { window.location.href = '/'; // 将 '/' 替换为目标主页的实际路径 }); ``` 此处 `.home-icon` 表示小房子图标的类名,而 `/` 则代表网站根目录下的默认页面位置。 ##### 基于 Vue Router 的解决方案 (适用于 Vue 项目) 假如正在构建的是一个 Vue 应用程序,那么应该采用更优雅的方式处理内部链接转换——即借助 `<router-link>` 组件或者 `$router.push` API 来达成目的。 ```vue <template> <div class="custom-navbar"> <!-- 左侧胶囊按钮 --> <button @click="goBack" class="back-button">←</button> <!-- 右侧小房子图标 --> <router-link to="/" custom v-slot="{ navigate }"> <img src="/path/to/home-icon.png" alt="Home" class="home-icon" @click="navigate"/> </router-link> </div> </template> <script> export default { methods: { goBack() { this.$router.go(-1); // 返回至上一页面 } } } </script> ``` 以上模板展示了如何结合 Vue Router 创建交互式的导航条目。其中 `@click="navigate"` 动态绑定至由插槽注入的方法对象 `{ navigate }` 上面,从而确保语义清晰的同时保持灵活性。 #### 自适应布局调整 由于提到需适配多种尺寸设备屏幕,在设置胶囊按钮高度及定位参数之前务必考虑响应式设计原则。推荐运用媒体查询(Media Queries)技术针对不同分辨率范围设定特定样式规则。 ```css /* 默认状态 */ .custom-navbar .back-button { height: var(--nav-height); } @media only screen and (max-width: 768px){ /* 当视口宽度小于等于768像素时生效 */ :root{ --nav-height: calc(40px * ((100vw / 375))); } } ``` 这里引入了 CSS 自定义属性(`--nav-height`)作为动态计算依据之一,并配合相对单位百分比(%), vw(viewport width),vh(viewport height)等手段优化跨屏表现效果。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值