首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用puppeteer获取在不同选项卡中打开的页面的url,或者从“单击此处”链接中提取URL?

Puppeteer是一个基于Node.js的开源工具,用于控制和自动化Chrome或Chromium浏览器。它提供了一组API,可以模拟用户在浏览器中的操作,例如导航、点击、填写表单等。

要使用Puppeteer获取在不同选项卡中打开的页面的URL,或者从“单击此处”链接中提取URL,可以按照以下步骤进行操作:

  1. 首先,确保已经安装了Node.js和Puppeteer。可以通过在命令行中运行以下命令来安装Puppeteer:
代码语言:txt
复制
npm install puppeteer
  1. 创建一个新的JavaScript文件,例如getUrls.js,并在文件中引入Puppeteer:
代码语言:txt
复制
const puppeteer = require('puppeteer');
  1. 在文件中创建一个异步函数,用于获取URL。在函数中,首先启动一个浏览器实例:
代码语言:txt
复制
async function getUrls() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 在这里执行后续操作
}
  1. 接下来,使用page.goto()方法导航到目标页面。如果需要在不同选项卡中打开页面,可以使用page.target()方法获取所有打开的页面,并使用page.waitForTarget()方法等待新页面打开:
代码语言:txt
复制
await page.goto('https://example.com');
const newPageTarget = await browser.waitForTarget(target => target.opener() === page.target());
const newPage = await newPageTarget.page();
  1. 如果需要从“单击此处”链接中提取URL,可以使用page.click()方法模拟点击操作,并使用page.waitForNavigation()方法等待页面导航完成:
代码语言:txt
复制
await page.click('a#clickHereLink');
await page.waitForNavigation();
  1. 最后,可以使用page.url()方法获取当前页面的URL,并进行相应的处理:
代码语言:txt
复制
const url = await page.url();
console.log(url);

完整的代码示例:

代码语言:txt
复制
const puppeteer = require('puppeteer');

async function getUrls() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');
  const newPageTarget = await browser.waitForTarget(target => target.opener() === page.target());
  const newPage = await newPageTarget.page();

  await page.click('a#clickHereLink');
  await page.waitForNavigation();

  const url = await page.url();
  console.log(url);

  await browser.close();
}

getUrls();

这样,你就可以使用Puppeteer获取在不同选项卡中打开的页面的URL,或者从“单击此处”链接中提取URL了。

对于Puppeteer的更多详细信息和API文档,你可以参考腾讯云的产品介绍页面:Puppeteer - 腾讯云

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

用 Javascript 和 Node.js 爬取网页

要从每个标题中提取文本,必须在 Cheerio 帮助下获取 DOM元素( el 指代当前元素)。然后每个元素上调用 text() 能够为你提供文本。...如果你不喜欢缺乏表达能力 JSDOM ,并且实践要依赖于许多此类操作,或者需要重新创建许多不同 DOM,那么下面将是更好选择。...这就具备了一些以前没有的可能性: 你可以获取屏幕截图或生成页面 PDF。 可以抓取单应用并生成预渲染内容。 自动执行许多不同用户交互,例如键盘输入、表单提交、导航等。...首先,通过 puppeteer.launch() 创建浏览器实例,然后创建一个新页面。可以将该页面视为常规浏览器选项卡。...完成后,通过单击 “Google搜索” 按钮提交搜索表单。然后告诉 Nightmare 等到第一个链接加载完毕,一旦完成,它将使用 DOM 方法来获取包含该链接定位标记 href 属性值。

10.1K10

网页抓取教程之Playwright篇

此外,网络应用程序开发到测试,自动化整个过程使用也越来越普及。网络爬虫工具越发流行。 拥有高效工具来测试网络应用程序至关重要。...Playwright等库浏览器打开网络应用程序并通过其他交互,例如单击元素、键入文本,以及网络中提取公共数据来加速整个过程。...简而言之,您可以编写打开浏览器代码,用代码实现使用所有网络浏览器功能。自动化脚本可以实现导航到URL、输入文本、单击按钮和提取文本等功能。...可以使用page.context()函数获取浏览器页面上下文。 02.定位元素 要从某元素中提取信息或单击某元素,第一步是定位该元素。Playwright支持CSS和XPath两种选择器。...由于Playwright异步特性和跨浏览器支持,它是其他工具较为流行替代方案。 Playwright可以实现导航到URL、输入文本、单击按钮和提取文本等功能。它可以提取动态呈现文本。

11.3K41
  • 小程序测试方案初探

    微信小程序发布这段时间,陆陆续续开发了不少小程序相关项目,总结了一些通用性组件,但是对于小程序如何做测试,依然是一头雾水,直到做了不少项目,积累一些经验和开源库之后才理清如何做测试,下面将会介绍如何对小程序做...puppeteer Chrome 团队出品一款更友好Headless Chrome Node API,用于代替用户页面上面点击、拖拽、输入等多种操作,常见使用场景还是应用到UI自动化测试,...chromium目录所在地址(上面链接下载之后解压),headless为true则不会打开chromium const browser = await puppeteer.launch({executablePath...'}); //关闭页面或者选项卡 await browser.close(); })(); 上面几行代码其实就是相当于我们日常一些操作:打开chrome->新建选项卡->输入url并回车->...,假如你小程序是依赖于后台CGI返回数据作为展示,那么你必须先上线CGI才能使用云测试,不够灵活,更希望有一个能自己mock数据来测试不同情况下小程序展示。

    8.5K30

    网页中提取结构化数据:Puppeteer和Cheerio高级技巧

    我们将结合这两个工具,展示如何网页中提取结构化数据,并给出一些高级技巧,如使用代理IP、处理动态内容、优化性能等。...例如,有些网站会使用分页或滚动加载来显示更多数据,或者使用下拉菜单或按钮来切换不同视图。...这些动态内容对于普通HTML解析器来说是不可见,因此我们需要使用Puppeteer来模拟浏览器交互行为,来触发或获取这些内容。Puppeteer,我们可以使用page对象来操作网页。...我们目标是豆瓣电影网站中提取最新上映电影名称、评分、类型和简介,并保存到一个CSV文件。...结语本文中,我们介绍了如何使用Puppeteer和Cheerio来网页中提取结构化数据,并给出了一些高级技巧,如使用代理IP、处理动态内容、优化性能等。

    65410

    Python爬虫之抓取某东苹果手机评价

    读者可以点击此处打开 京东商城,如下图所示: ? ? URL 是 苹果手机商品 。商品页面如下图所示: ? ?...面的下方是导航条,读者可以单击导航条上数字按钮,切换到不同页面,会发现浏览器地址栏 URL 并没改变,这种情况一般都是通过另外通道获取数据,然后将数据动态显示页面上。...那么如何来寻找这个通道 URL 呢?... Chrome 浏览器开发者工具 Network 选项单击 XHR 按钮,再切换到其他,并没有发现要找 API URL,可能京东商城获取数据方式有些特殊,不是通过 XMLHttpRequest...搜索结果中会看到 1个名为 productPageComments.action URL ,单机这个 URL右侧切换到 Preview 选项卡,会看到如上图所示内容,很明显,这是 JSON

    1.2K30

    使用C#也能网页抓取

    Html Agility Pack可以本地文件、HTML字符串、任何URL和浏览器读取和解析文件。 我们例子,我们需要做就是URL获取HTML。...06.解析HTML:获取书籍链接 在这部分代码,我们将从网页中提取所需信息。在这个阶段,文档现在是一个类型对象HtmlDocument。这个类公开了两个函数来选择元素。...浏览器打开上述书店页面,右键单击任何书籍链接,然后单击按钮“检查”。将打开开发人员工具。...我们可以写一个foreach循环,并从每个链接一个一个地获取href值。我们只需要解决一个小问题——那就是页面上链接是相对链接。因此,我们抓取这些提取链接之前,需要将它们转换为绝对URL。...为了转换相对链接,我们可以使用Uri该类。我们使用此构造函数来获取Uri具有绝对URL对象。

    6.4K30

    使用Puppeteer构建博客内容自动标签生成器

    本文将介绍如何使用Puppeteer这个强大Node.js库来构建一个博客内容自动标签生成器,它可以根据博客文章标题和正文内容,自动提取出最相关标签,并保存到数据库。...创建一个浏览器标签,并打开目标博客网站首页。获取首页上所有博客文章链接,并保存到一个数组。遍历数组每个链接打开对应博客文章页面,并获取文章标题和正文内容。...获取首页上所有博客文章链接,并保存到一个数组打开目标博客网站首页后,我们可以使用page.$$eval()方法来获取首页上所有博客文章链接,并保存到一个数组。...遍历数组每个链接打开对应博客文章页面,并获取文章标题和正文内容获取到首页上所有博客文章链接后,我们可以使用for...of循环来遍历数组每个链接,然后使用page.goto()方法来打开对应博客文章页面...结语本文介绍了如何使用Puppeteer这个强大Node.js库来构建一个博客内容自动标签生成器,它可以根据博客文章标题和正文内容,自动提取出最相关标签,并保存到数据库

    24610

    我写了一个自动化脚本涨粉,0阅读到接近100粉丝

    Chromium 和 Chrome区别 在学puppeteer之前我们先来了解下 headless chrome 什么是 Headless Chrome 无界面的环境运行 Chrome 通过命令行或者程序语言操作...devtools boolean 是否为每个选项卡自动打开DevTools面板, 这个选项只有当 headless 设置为 false 时候有效 puppeteer如何使用 下面介绍 10 个关于使用...Puppeteer 用例,并在介绍用例时候会穿插讲解一些 API,告诉大家如何使用 Puppeteer: 01 获取元素及操作 如何获取元素?...(); await page.goto(URL); await page.waitFor(5000); // 等待五秒,确保页面加载完毕 // 获取左侧导航所有链接地址及名字 let...${aTags[0].name}.pdf`}); // 遍历节点数组,逐个打开并保存 (此处不再打印第一) for (let i = 1, len = aTags.length; i < len

    52310

    AuthCov:Web认证覆盖扫描工具

    特性 同时适用于单页面应用程序和传统多页面应用程序 处理基于令牌和基于cookie身份验证机制 生成HTML格式深入报告 可以报告查看已爬取各个页面的截图 安装 安装node 10。...saveResponses 布尔 API端点保存响应正文,以便你可以报告查看它们。 saveScreenshots 布尔 保存已抓取页面的浏览器屏幕截图,以便你可以报告查看它们。...配置登录 配置文件中有两种配置登录方法: 使用默认登录机制,使用puppeteer指定输入输入用户名和密码,然后单击指定提交按钮。...这可以通过配置文件设置loginConfig选项来配置。你也可以查看此处示例。...": "input[name=password]", "submitXpath": "#login-button" } 如果你登录表单较复杂并且涉及多用户交互,那么你可以配置文件定义自己puppeteer

    1.8K00

    ​越权检测 burp插件 autorize 使用

    获取低权限用户授权令牌标头(Cookie/授权)并将其复制到包含文本“在此处插入注入标头”文本框。 注意:此处插入标题将被替换(如果存在)或添加(如果不存在)。...单击“拦截已关闭”开始拦截流量,以便 Autorize 检查授权执行情况。 打开浏览器并配置代理设置,以便将流量传递给 Burp。 浏览到您要使用高特权用户测试应用程序。...Autorize 表将向您显示请求 URL 和执行状态。 可以单击特定 URL 并查看原始/修改/未经身份验证请求/响应以调查差异。...使用 1 获取低权限cookie 这里可以将获取低权限cookie复制到此处 图片 或者点击 fetch cookies header,会最近一次请求历史中提取cookie 图片 2 开启插件 图片...有两种不同强制检测器选项卡,一种用于检测低特权请求强制执行,另一种用于检测未授权请求强制执行。

    3.7K30

    HTML注入综合指南

    还是这种结构本身成为Web应用程序损坏原因?今天,本文中,我们将学习如何**配置错误HTML代码**,为攻击者用户那里获取**敏感数据**。 表内容 什么是HTML?...现在,让我们深入研究不同HTML注入攻击,并查看异常方式如何破坏网页并捕获受害者凭据。...[图片] 从上面的图像,您可以看到用户**“ Raj”**打开了网页,并尝试以**raj:123**身份登录内部**。** 因此,让我们回到**侦听器**并检查是否响应捕获了凭据。...** [图片] “ Repeater”选项卡,当我单击**“ Go”**按钮以检查生成**响应时,**我发现我HTML实体已在此处**解码**为**HTML**: [图片] 因此,我处理了完整...[图片] 让我们看一下它代码,看看开发人员如何在屏幕上获取当前URL。 在这里,开发人员使用PHP全局变量作为**$ _SERVER**来捕获当前页面URL

    3.9K52

    Python每日一练(21)-抓取异步数据

    我们平时浏览网页过程,可以发现有很多网站显示页面上数据并不是一次性服务端获取,有一些网站,如图像搜索网站,当滚动条向下拉时,会随着滚动条向下移动,有更多图片显示出来。...逆向工程 在上面已经模拟实现了一个异步装载页面,这里以这个程序为例进行分析,如果对这个程序实现原理不了解,那么应该如何得知当前页面的数据是异步加载呢?以及如何获取异步请求 URL 呢?... Elements 选项卡代码发现,所有8个列表都实现出来了,赶紧使用网络库和分析库抓取和提取数据,代码如下: import requests from lxml import etree response... Response 选项卡也可以看出,下载HTML代码只有前4个列表项。那么在这里为什么与 Elements 选项卡显示HTML 代码不同呢?其实这两个地方显示 HTML 代码处于不同阶段。...之前AJAX 请求到数据吗? ? 那么详情 URL 在哪呢?我们分别点开两个不同公司详情进行 URL 对比分析:天津银曼家化科技有限公司 ?

    2.7K20

    Puppeteer 入门与实战

    一、起因 虽说Puppeteer是Chrome开发团队2017年发布一个 Node.js包,但是团队日常工作基本没有使用。...headless如何在终端中使用:我们尝试通过终端命令打开vivo 官网 chrome --headless --disable-gpu --remote-debugging-port=8080...三、Puppeteer Puppeteer可以做些什么呢?我们文章开始一个demo可以发现,Puppeteer可以爬取页面数据。..._connection.send('Target.createTarget',{})使用CDPTarget.createTarget创建页面了页面,同样,我们其他API时也是使用CDP方法,...,经常会碰到表单提交,对于表单不同字段校验需要模拟不同场景,人工点击效率低,而且每次都需要重复表单输入,比较繁琐。

    2.1K40

    自动化 Web 性能分析之 Puppeteer 爬虫实践

    本文将向大家介绍自动化性能分析使用核心库——Puppeteer,并结合页面登录场景,介绍 Puppeteer 百策系统应用。...创建最新自动化测试环境,使用最新 JavaScript 和浏览器功能,直接在最新版本 Chrome 运行测试。 捕获页面的时间轴来帮助诊断性能问题。 测试 Chrome 扩展程序。...初探 Puppeteer页面截图开始 实现页面截图,首先我们需要创建一个浏览器实例,然后打开一个页面,加载指定 URL,在打开页面上触发截图操作,最后再将浏览器关闭。...又探 Puppeteer:自动测试页面性能 我们知道 Web Performance 接口允许页面 JavaScript 代码可以通过具体函数测量当前网页页面或者 Web 应用性能。...双探 Puppeteer:爬取苏宁易购商品信息 打开电商首页,输入想要商品名称,点击搜索按钮,跳转至相应商品列表,然后一浏览,从而找到心仪商品,这大概就是我们平时网购样子。

    3.5K40

    26个你需要学习Firefox配置技巧,改进体验和加快浏览器响应速度

    要撤消about:config中所做特定更改,只需右键单击要恢复条目并单击“Reset”。 ---- 1. 更改内容流程数量 你喜欢同时打开很多标签吗?...或者你很少打开超过5个标签吗?您拥有的内容进程越多,分配给每个选项卡CPU资源就越多(这也将使用更多RAM)。...1 -不要打开任何新窗口 2 -打开所有链接方式,你有Firefox处理新窗口,除非Javascript指定如何显示窗口 14....单击URL栏时选择所有文本 Windows和Mac,当你点击URL栏时,Firefox会高亮显示所有文本。Linux,它不会选择所有的文本。相反,它将光标放在插入点。...Firefox,你可以通过返回前一或者向上滚动页面来设置退格,如果是滚动页面的话。

    4.7K20

    Memlab,一款分析 JavaScript 堆并查找浏览器和 Node.js 内存泄漏开源框架

    目录 安装 Memlab Demo App 检测泄漏 设置示例 Web App 1. 克隆仓库 2....它支持定义一个测试场景(使用 Puppeteer API),教 Memlab 如何与您应用程序(SPA)交互,Memlab 可以自动处理其余内存泄漏检查: 与浏览器交互并获取 JavaScript...检测泄漏 使用 Memlab 检测分离 DOM 元素教程。...第 3 部分:每个泄漏簇详细代表泄漏跟踪 泄漏跟踪是 GC 根(垃圾收集器遍历堆堆图中入口对象)到泄漏对象对象引用链。跟踪显示泄漏对象为何以及如何在内存仍然保持活动状态。...map - 这是正在访问对象 V8 HiddenClass(V8 在内部使用它来存储有关对象形状元信息和对其原型引用 - 在此处查看更多信息)- 大多数情况下,这是 V8 实现细节,可以忽略。

    3.7K20

    cdp 远程调试方案

    Chromium、V8 或 Node.js Protocol:cdp 调试协议,调试器前端和后端使用此协议通信。它分为代表被检查实体语义方面的域。...ws=${webSocketDebuggerUrl} 或者直接访问 http://0.0.0.0:9222/ 可以看到浏览器 tab 线程,点击需要调试页面,http://0.0.0.0:9222...chrome.debugger.onEvent.addListene:监听指定选项卡所有事件,再回调函数 response cdp 消息到 scocket 服务端。...与需要依赖插件 background 层执行 chrome.debugger API 方案不同。chobitsu 浏览器运行时环境手动实现了cdp 协议。...同理 react-devtools 实现方案,也与 cdp 方案类似, 调试页面引入或者通过插件插入 backend.js,监听变化发送到调试应用。

    2.6K20

    独家 | 手把手教你用Python进行Web抓取(附代码)

    使用代码网站收集数据,当时对我来说是一个完全陌生概念,但它是最合理、最容易获取数据来源之一。经过几次尝试,网络抓取已经成为我第二天性,也是我几乎每天使用技能之一。...对于web抓取,有一些不同库需要考虑,包括: Beautiful Soup Requests Scrapy Selenium 本例我们使用Beautiful Soup。...右键单击感兴趣元素并选择“Inspect”,显示html元素。 由于数据存储一个表,因此只需几行代码就可以直接获取数据。...如上一节所述,此网页一个页面上显示所有结果,因此此处给出了地址栏完整url: # specify the url urlpage = 'http://www.fasttrack.co.uk/league-tables...我们可以使用一些进一步提取获取这些额外信息。 下一步是循环结果,处理数据并附加到可以写入csvrows。

    4.8K20

    API测试之Postman使用全指南(原来使用 Postman测试API如此简单)

    10、HTTP Request - 单击它将显示不同请求下拉列表,例如 GET, POST, COPY, DELETE, etc. 测试,最常用请求是GET和POST。...19、Settings - 最新版本有设置,一般用不到。 ? 如何处理GET请求 Get请求用于指定URL获取信息,不会对端点进行任何更改。...**注意:**某些情况下,Get请求失败可能由于URL无效或需要身份验证。 如何处理POST请求 Post请求与Get请求不同,因为存在用户向端点添加数据数据操作。...Step 4) 单击Run按钮后将显示Run结果。根据延迟不同,你应该在测试执行同时看到显示结果。 1、一旦测试完成,你就可以看到测试状态是通过还是失败,以及每个迭代结果。...Step 4 ) 选择导出集合,默认使用推荐集合版本,比如此处是v2.1,然后单击导出: ?

    2.5K10

    如何 0 到 1 搭建性能检测系统(修正版)

    ○ 开始入口 以下是百策价值 1 个亿代码,主要流程如下,钩子函数是用于页面打开不同时间获取性能数据 /** * 执行页面信息收集 * * @param {PassContext} passContext...{ browser, page }; } ○ 模拟登录 模拟登录场景可以参考另一篇,自动化 Web 性能分析之 Puppeteer 爬虫实践第四节,大致实现逻辑如下:通过无头浏览器打开政采云登录...根据同一浏览器下相同域名共享 Cookie 特性,再新开标签打开需要检测 URL,便可以开始性能检测。...○ 打开页面 如何Puppeteer使用 Lighthouse 可以参考 Using Puppeteer with Lighthouse (https://github.com/GoogleChrome...政采云,前台页面我们使用框架是 Vue, 台页面使用是 React(部分页面由于历史原因用还是 jQuery)。所以大致可以根据框架来区分模型。

    2.9K51
    领券