信息来源：互联网   发布时间：2023-09-07

二手车之家车史业务在交易过程中变得不可或缺；为了解决数据供应商对车史业务数据的限制，本文采用Selenium+Phantomjs技术保证之家用户的使用体验，解决了因为供应商的限制导致的报告失效问题，实现车史数据报告随时随地分享；

 

关注“之家技术”，获取更多技术干货

总篇186篇 2022年第61篇 1.  二手车发展现状经过十余年的发展，中国二手车正步入高速发展期，但面对当前的许多问题，二手车的发展仍处于初级阶段目前，二手车市场还存在严重的信息不对称，车辆的维修保养记录、事故记录等信息不公开，公民诚信体系尚未建立等情况，在这种背景下，客户只有通过独立的第三方二手车鉴定评估机构或二手车经营机构中专业二手车鉴定评估师对二手车进行全面综合的检测与鉴定，才可获取车辆较完整或者大概的技术状况。

反观国外二手车交易市场，对车辆的检测非常严格，要进行强检入场，确保事故车、泡水车、火烧车不入场，或者分区域展示销售；欧美发达国家的二手车发展，市场已经相当成熟，形成了一套完整的市场体系，能够给二手手车消费者提供足够的安全保障，获得消费者的信任。

比如美国每年二手车销量是新车的3.2倍，繁荣的二手车市场，这一强大的市场综合体包括了车辆信息的采集、信用体系和检测体系等，独立的体系互相协作，有效的解决由于市场信息不对称导致的法律风险和道德风险二手车市场交易的目的就是为了获得更高的利润，为了获取更高的利润就必须进行二手车行业的创新，而创新的动力主要来源技术推动和流量增长。

流量的增长可以让更多的消费者了解产品，也就是推广技术推动就是技术更新迭代，从而维护现有的流量人群，从而获得更多地利润二手车创新最重要的一点就是交易透明化，具体化，只有交易能得到保障，消费者才会买账，人无信则无立，企业也是这样的。

对二手车的车价提供可靠的参考标准及车辆评估，了解二手车的维修保养情况和事故出险记录，成交的交易数据公开化展示，建立并指定相关的交易标准2.  汽车之家二手车车史发展汽车之家二手车的车史发展可以分成3个阶段：

⭐1. 0-1接入二手车维修保养记录报告，帮助商家进行收车查询车辆维修保养记录报告，到后期提供给买车用户下单查询服务，维修保养记录报告很大程度上增加了二手车交易过程中的信息透明度，规范买卖双方更加安全的进行交易；为了完善二手车的出险记录，汽车之家开始接入第三方车辆出险记录报告，与维保报告组合形成汽车之家二手车综合报告，极大的丰富和完善了二手车的车况、维修、出险信息；随着维修保养记录报告、出险记录报告对接供应商的增加，汽车之家二手车在车史报告接入上形成了规范的接入流程和接入标准，新增供应商的接入实现最小时间投入，并实现供应商服务提供动态调整；

⭐2.提升二手车车史报告查得率（报告查询成功的概率），汽车之家二手车增加银保信、车信盟等官方数据平台，车史档案更新迭代，上线扩大数据源，报告查得率居行业第一，高效帮助用户解决了购车顾虑；⭐3.汽车之家联合北理新源，在汽车资讯、车主服务、二手车评估等场景中的新能源仿真数据应用展开深入合作，作为行业内唯一签约合作伙伴，汽车之家将和北理新源在新能源汽车电池性能评估及技术咨询开展战略合作。

汽车之家借助北理新源的车联网大数据分析与挖掘技术与经验，结合自身看、买、用、换等相关场景，在C端、二手车、主机厂与经销商等业务中，规划业内诸多唯一性的产品与服务，进一步建立“人无我有”的汽车生态优势3.  技术方案选型

3.1Selenium一款可以实现网页自动化操作、自动化测试的框架；在网页自动化操作方面，它可以自动浏览网页，并进行网页表单的自动填写，网页中数据的采集；在自动化测试方面，它可以用在单元测试、回归测试、冒烟测试、集成测试、验收测试中；Selenium库有一个WebDriver的API，WebDriver可以控制浏览器的操作，它可以像BeautifulSoup或者其他Selector对象一样来查找页面元素，与页面上的元素进行交互（发送文本、点击等），以及执行其他动作来运行网络爬虫；

Selenium具有支持多语言多浏览器的特性，为什么可以支持多语言和多浏览器，如下是图1.1selenium基本架构：

具体过程步骤如下：► 蓝色部分是面向我们开发人员的编码阶段，支持java、C#、Ruby、python、JavaSciprt等语言；例如点击操作：java方式：driver.findElement(By.id()).click(),

python方式：document.find_element_by_id().click();► 编码阶段结束之后并没有直接与浏览器Driver进行通信，而是通过selenium客户端程序将操作转换成JSON WireProtocol协议（webdriver协议）；协议定义了一套标准接口规范，

例如上面的点击操作，对应的接口协议是：POST /session/{sessionid}/element/{element id}/click；► 最后Browser Driver解析具体协议，不需要关注客户端具体使用的开发语言是什么，这就是selenium支持多语言特性；

► Browser driver有各个浏览器厂商提供的driver，每一个浏览器driver都是一个独立服务和进程，是selenium与浏览器通信的桥梁，根据webdriver协议解析结果，调用浏览器与之对应的协议进行操控浏览器，这就是selenium支持多浏览器特性；

3.2PhantomJs一个基于webkit的JavaScript API，它使用QtWebKit作为它核心浏览器的功能，使用webkit来编译解释执行JavaScript代码，任何可以在基于webkit浏览器做的事情，它都能做到；它不仅是个隐形的浏览器，提供了诸如CSS选择器、支持web标准、Dom操作、Json、Html5、Canvas、SVG等，同时也提供了处理文件I/O的操作，从而使你可以向操作系统读写文件等；PhantomJs的用处非常广泛，诸如网路监测、网页截屏、无需浏览器的web测试、页面访问自动化等；

PhantomJs VS ChromeDriver：PhantomJs无界面模式，可以节省内存，ChromeDriver完全模仿浏览器，消耗内存4.  面对问题&备选方案车信报告作为二手车车史信息完善的一部分，在交易过程中让买卖双方信息更加透明；第三方采用授权固定有效期内报告可以正常查看的规则约束报告使用方，报告有效期30天，超出时间之后，用户需要重新向第三方下单，因此摆在我们面前的问题有：。

1. 用户花费余额购买的报告超出时间之后无法查看； 2. 系统缺少车信报告相关数据，无法进行进一步研究； 3. 阻碍用户进行报告分享； 4. 无法将报告进行永久保存； 5. 第三方不对外提供相关数据报告接口；

针对如上这些问题，我们可以采用的备选方案如下：方案一：将报告进行解析，保存报告数据；成本： 花费大量的研发成本研究对方报告内容，与业务方配合沟通确认报告内容，最后将对报告展现进行重新开发页面进行适配；风险：

 报告解析的复杂性，第三方内容变更导致报告解析失败或不完整，对报告内容理解不到位引起更多的解释成本；收益： 无需第三方提供数据接口实现报告数据的本地存储，方便后续对车况进行进一步研究，自定义报告展示页面内容，加速报告详情迭代速度；

方案二：将报告通过app客户端生成图片保存到客户端；成本： 利用app原生客户端进行截图功能开发，需要适配多端多尺寸多机型，投入双倍人力，并且都需要满足不同客户端的研发场景；风险： 保存的图片报告无法进行随时查看，更换手机之后需要重新通过app客户端重新下载保存，android和ios平台不同尺寸不同机型的适配问题相对复杂；如果对已经出报告的内容忘记截图，超过过期时间之后还是无法查看报告；

收益： 因为是客户端截图和存储，对服务器没有数据存储要求，保存到客户端相册方便客户进行图片分享；方案三：通过服务器端，将车信报告生成图片，上传到图片服务器，然后绑定当前车信报告，达到报告的永久保存和随时下载分享；

成本： 使用服务器存储资源，将服务器端截图进行存储；风险： 车史报告图片异步生成，存在极端情况用户无法查看或者分享报告图片内容；服务器端截图图片质量问题；收益： 车史报告永久保存，所有用户分享的报告图片都是一样的，不存在第三方数据报告过期问题，用户随时随地在不同的客户端都可以进行报告的查看和分享；

5.  技术方案实施步骤本文采用python开发，利用selenium的无核浏览器特性，通过webdriver结合phantomjs，进行客户端网页的图片流的下载，并上传到图片服务器，最终将生成的图片地址与当前报告进行绑定；流程参考如图3.0应用步骤流程图：

a) 首先对应用进行配置初始化，具体参数项说明请参考下表：配置项说明Cxm_report_url获取第三方报告详情地址Image_upload_url图片上传地址Cxm_report_img_update_url

更新报告图片标识位Reportlist返回没有图片报告列表PHANTOMJS_MacOS_DIRMacOS环境下PhantomJs执行目录PHANTOMJS_Linux_DIRLinux环境下PhantomJs执行目录

PHANTOMJS_Windows_DIRWindows环境下PhantomJs执行目录配置项代码：import osbasedir = os.path.abspath(os.path.dirname(__file__))

# 报告地址cxm_report_url = " cxm_report_url "# 图片上传地址image_upload_url = " image_upload_url "# 更新报告地址cxm_report_img_update_url = 

"hcxm_report_img_update_url "# 报告列表reportlist = " reportlist "# macos envPHANTOMJS_MacOS_DIR = "/phantomjs-2.1.1-macosx/bin/phantomjs"

# linux envPHANTOMJS_Linux_DIR = "/phantomjs-2.1.1-linux-x86_64/bin/phantomjs"# windows envPHANTOMJS_Windows_DIR = 

"\\phantomjs-2.1.1-windows\\bin\\phantomjs.exe"b) 获取需要生成图片报告列表def getreportlist():    res_report = requests.get(sys_config.reportlist)

    reportlist = json.loads(res_report.content)return reportlistc) 车信图片上传到图片服务器，这里需要指定上传api身份信息、content-type，身份标识信息通过cookie携带提交到服务器，指定application/x-www-form-urlencoded作为request headers的content-type；

def uploadimg(imgbase64,cxm_reportid):    cookies = {"cookie": "value"}    data = {"base64data": "" + imgbase64 + 

""}    headers = {Content-Type: application/x-www-form-urlencoded}    res_img_url = requests.post(url=sys_config.image_upload_url, data=data)

    res_img_json = json.loads("{" + res_img_url.text + "}")    img_url = res_img_json["msg"]    res_img_update = requests.post(url=sys_config.cxm_report_img_update_url)

return res_img_updated)图片生成，首先初始化PhantomJs driver，然后通过querycode向第三方查询报告详情地址，execute_script执行当前页面加载到PhantomJs中的计算页面内滚动的高度，为了底部留白高度增加430，然后通过set_window_size来设置窗口的宽高，最后get_screenshot_as_base64保留客户端截图的base64图片流，将图片流上传服务器返回用户可是使用的报告图片地址；

def genimg(reportlist,phantomjspath):for cxmreport in reportlist["result"]:        try:            driver = webdriver.PhantomJS(phantomjspath)

            querycode = cxmreport["querycode"]            cxm_reportid = cxmreport["cxm_reportid"]            vincode = cxmreport[

"vincode"]            res_cxm_url = requests.get(sys_config.cxm_report_url + querycode)            res_cxm_url_json = json.loads(res_cxm_url.text)

            cxm_url = res_cxm_url_json["result"]["url"]            driver.get(cxm_url)            time.sleep(5)

            height = 0            js = "if(document.querySelector(.outside)!=undefined) {return document.querySelector(.outside).scrollHeight;}else{return window.innerHeight;}"

            height = driver.execute_script(js)            height = height + 430            driver.set_window_size(414, height)

            imgbase64 = driver.get_screenshot_as_base64();            res_img_update = uploadimg(imgbase64,cxm_reportid)

            driver.quit()        except Exception as e:print(str(e))6.  技术方案实施经验总结1.第三方报告内容H5采用页面内滚动方式，直接使用截图方案只能针对首页第一屏进行图片截取，需要根据页面内滚动高度动态计算截图窗口的高度，才能将图片完整截取；

2.报告内容H5宽度400px，在app上有很好的浏览效果，但是采用服务器截图在pc客户端浏览状态不好，放大之后存在图片失真的效果，如果能够模拟客户端浏览器放大之后再进行截图是不是可以提升图片质量，结论是可以提升，但是第三方h5内容布局无法兼容，导致放大之后布局错位，所以最终还是没有采取放大的措施进行提升图片质量；

3. linux服务器存在中文字体识别的问题，导致保存的图片乱码或者中文识别不了，解决这个问题就是需要将中文字体下载到linux服务器；4. 因为服务器和浏览器支持的字体属性各不相同，最后保存图片的质量也因为mac环境或者是windows环境或者是linux环境而有所不同；在“苹方简”字体和“宋体”下效果不一样，解决方案就是保证服务器能够支持对应的字体。

7.  成果和展望结合调度平台，对车信报告图片的生成实现了几乎近实时，上线截止到现在，共生成车信报告将1500+，没有出现生成失败的情况；多平台动态截图方案虽然在车史报告中成功应用，但存在几个问题仍需进一步探索和解决：1）图片水印还没去掉;2）右侧侧边栏滚动效果被截图保留，影响用户体验;3）服务器保存图片字体质量有待提高；希望强大的Selenium+PhantomJs可以应用到更多的业务场景中，比如邮件附动态图片，web应用自动化测试，爬虫应用等。

车信报告的完整度保存成图片，示例如下：

   linux 

  macos作者简介

 刘小云  ■二手车-技术部-商家团队。■2015年加入汽车之家。10年+开发经验，从事后端开发；负责车智赢相关系统研发工作；主要搭建二手车商增值业务、金豆等模块。

阅读更多：之家云API网关的前世今生汽车之家AutoKH混部技术实践PYTHON自动化操作PPT实践▼ 关注「之家技术」，获取更多技术干货 ▼

免责声明：本站所有信息均搜集自互联网，并不代表本站观点，本站不对其真实合法性负责。如有信息侵犯了您的权益，请告知，本站将立刻处理。联系QQ：1640731186