CN106874193A - 一种检测flex布局属性完整性的方法及系统 - Google Patents

一种检测flex布局属性完整性的方法及系统 Download PDF

Info

Publication number
CN106874193A
CN106874193A CN201710014376.1A CN201710014376A CN106874193A CN 106874193 A CN106874193 A CN 106874193A CN 201710014376 A CN201710014376 A CN 201710014376A CN 106874193 A CN106874193 A CN 106874193A
Authority
CN
China
Prior art keywords
flex
attributes
webkit
moz
attribute
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201710014376.1A
Other languages
English (en)
Inventor
范春燕
袁北林
莫伟雄
罗辉
韩仲亮
谭和华
李耀军
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shenzhen Saiyi Technology Development Co Ltd
Original Assignee
Shenzhen Saiyi Technology Development Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shenzhen Saiyi Technology Development Co Ltd filed Critical Shenzhen Saiyi Technology Development Co Ltd
Priority to CN201710014376.1A priority Critical patent/CN106874193A/zh
Publication of CN106874193A publication Critical patent/CN106874193A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/36—Preventing errors by testing or debugging software
    • G06F11/362—Software debugging
    • G06F11/3624—Software debugging by performing operations on the source code, e.g. via a compiler

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Computer Hardware Design (AREA)
  • Quality & Reliability (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供一种检测flex布局属性完整性的方法和系统，该方法包括以下步骤：接收待检测的网站地址；访问所述网站地址对应的网页并获取所述网页的源码；从网页源码中查找CSS样式文件；在CSS样式文件中查找是否有flex属性；查找到flex属性，则继续检测flex属性的个数和flex属性的顺序；没查找到flex属性，则退出，并提示没有flex属性；该系统包括：网站地址输入模块，用于接收待检测的网站地址；网页源码获取模块，用于从网站地址对应的网页中获取网页的源代码；CSS文件获取模块，用于从网页源代码中获取CSS样式文件；Flex属性查找模块，用于从CSS样式文件中查找flex属性；Flex属性个数检测模块和Flex属性顺序检测模块，用于检测CSS文件中flex属性的个数和排列顺序。

Description

一种检测flex布局属性完整性的方法及系统
技术领域
本发明属于计算机互联网技术领域，尤其涉及到一种检测flex布局属性完整性的方法及系统。
背景技术
随着互联网的发展,用户的体验直接关系到是否能够留住用户，那么前端开发布局直接关系到用户体验，前端开发flex布局对日益复杂的前端开发布局来说是一种利器，并且在不同的屏幕上能实现真正的响应式式布局，可以不再单纯地依赖百分比和float的强拼硬凑来达到需求，并且能弹性的伸缩元素，简洁易维护的代码，所以flex布局受到开发人员的各种青睐。但越来越多的用户通过各种自己喜爱的浏览器进行网页浏览，造成网页开发人员必须具备跨浏览器开发的能力，而flex的除了chrome外其他浏览器兼容性并没有那么好，如果兼容性没有写完整，或者兼容性属性的顺序错乱直接会不起作用，所以检查flex盒模型的写法很有必要。现有的检查技术一般是在开发出来的网页在不同的浏览器中反复测试才能看出是否有问题，这样不管对测试人员测试和开发人员解bug都需要付出大量的时间和精力。
发明内容
本发明的目的在于提供一种检测flex布局属性完整性的方法及系统，用于解决现有技术中检测flex盒模型兼容性属性的完整性及顺序的正确性所造成的不仅工作量大而且有可能不准确的问题。
本发明一种检测flex布局属性完整性的方法，所述检测flex布局属性完整性的方法包括：接收待检测的网站地址；访问所述网站地址对应的网页并获取所述网页的源码；从网页源码中查找CSS样式文件；在CSS样式文件中查找是否有flex属性；查找到flex属性，则继续检测flex属性的个数；检测flex属性的顺序；没查找到flex属性，则退出，并提示没有flex属性。
其中，所述访问网站地址对应的网页并获取所述网页源代码是通过后台执行完成的。
其中，所述flex属性包括：5个display属性，所述5个display属性值分别为-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex；6个水平居中属性，分别为-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content；
6个垂直居中属性，分别为-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items；
4个平铺方式属性，分别为-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction；5个换行属性，分别为-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。
其中，所述flex属性的标准属性值放在所有display属性的最后。
其中，所述flex布局属性完整性的检测结果以消息框显示，如果所述属性个数不对或所述属性排列顺序不对，显示此时代码行数和CSS文件名；
其中，若所述属性个数和所述属性排列顺序都对，显示flex布局属性完整的提示。
其中，本发明的一种检测flex布局属性完整性的系统，包括：网站地址输入模块，用于接收待检测的网站地址；网页源码获取模块，与所述网站输入模块相连，用于从所述网站输入模块中获取所述网站地址，访问所述网站地点在对应的网页并获取所述网页的源代码；CSS文件获取模块，用于从所述网页源代码中获取CSS样式文件；Flex属性查找模块，用于从CSS样式文件中查找flex属性；Flex属性个数检测模块，用于检测CSS文件中flex属性的个数；Flex属性顺序检测模块，用于检测CSS文件中flex属性中的各display属性的顺序。
其中，所述访问网站地址对应的网页并获取所述网页源代码是通过后台执行完成的。
其中，所述flex属性包括：5个display属性，所述5个display属性值分别为-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex；
6个水平居中属性，分别为-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content；
6个垂直居中属性，分别为-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items；
4个平铺方式属性，分别为-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction；
5个换行属性，分别为-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。
其中，所述flex属性的标准属性值放在所有display属性的最后。
其中，将所述flex布局属性完整性的检测结果以消息框显示，包括：所述属性个数不对或所述属性排列顺序不对或所述属性个数和所述属性排列顺序都不对，显示此时代码行数和CSS文件名；当所述属性个数和属性排列顺序都对，所述显示flex布局属性完整的提示。
本发明的实施例提供的技术方案可以包括以下有益效果：
针对以上特点，本发明一种检测flex布局属性完整性的方法和系统，能够快速确定flex盒模型的属性的写法是否完整，编写顺序是否正确，并对错误进行准确的定位提示，从而提高工作效率。
附图说明
图1是检测flex布局属性完整性的方法流程图。
图2是检测flex布局属性完整性的系统框图。
具体实施方式
以下参考附图，对本发明予以进一步地详尽阐述。
请参阅附图1，在本实施例中，该一种检测flex布局属性完整性的方法，所述检测flex布局属性完整性的方法包括以下步骤：
步骤S1：接收待检测的网站地址；
步骤S2：访问所述网站地址对应的网页并获取所述网页的源码；
步骤S3：从网页源码中查找CSS样式文件；
步骤S4：在CSS样式文件中查找是否有flex属性；
步骤S5：查找到flex属性，则继续检测flex属性的个数；
步骤S6：检测flex属性的顺序；
步骤S7：如果没查找到flex属性，则退出，并提示没有flex属性。
其中，步骤S2所述访问网站地址对应的网页并获取所述网页源代码是通过后台执行完成的。
其中，步骤4中所述flex属性包括：5个display属性，所述5个display属性值分别为-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex；
6个水平居中属性，分别为-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content；
6个垂直居中属性，分别为-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items；
4个平铺方式属性，分别为-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction；5个换行属性，分别为-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。
其中，步骤4中所述flex属性的标准属性值放在所有display属性的最后。
其中，步骤5中，查找到flex属性，所述flex布局属性完整性的检测结果以消息框显示，如果所述属性个数不对，则显示此时代码行数和CSS文件名。
其中，步骤6中，如果所述属性排列顺序不对，则显示此时代码行数和CSS文件名。
其中，若所述属性个数和所述属性排列顺序都对，显示flex布局属性完整的提示。
其中，请参阅附图2，本发明的一种检测flex布局属性完整性的系统100，包括：网站地址输入模块101，用于接收待检测的网站地址；网页源码获取模块102，与所述网站输入模块相连，用于从所述网站输入模块中获取所述网站地址，访问所述网站地点在对应的网页并获取所述网页的源代码；CSS文件获取模块103，用于从所述网页源代码中获取CSS样式文件；Flex属性查找模块104，用于从CSS样式文件中查找flex属性；Flex属性个数检测模块105，用于检测CSS文件中flex属性的个数；Flex属性顺序检测模块106，用于检测CSS文件中flex属性中的各display属性的顺序。
其中，网页源码获取模块102中，所述访问网站地址对应的网页并获取所述网页源代码是通过后台执行完成的。
其中，flex属性查找模块104所查找的所述flex属性包括：5个display属性，所述5个display属性值分别为-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex；6个水平居中属性，分别为-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content；
6个垂直居中属性，分别为-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items；4个平铺方式属性，分别为-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction；
5个换行属性，分别为-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。
其中，所述flex属性的标准属性值放在所有display属性的最后。
其中，将所述flex布局属性完整性的检测结果以消息框显示，包括：Flex属性个数检测模块105检测到的所述属性个数不对或Flex属性顺序检测模块106检测到的所述属性排列顺序不对，均显示此时代码行数和CSS文件名；当所述属性个数和属性排列顺序都对，所述显示flex布局属性完整的提示。
上述内容，仅为本发明的较佳实施例，并非用于限制本发明的实施方案，本领域普通技术人员根据本发明的主要构思和精神，可以十分方便地进行相应的变通或修改，故本发明的保护范围应以权利要求书所要求的保护范围为准。
应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围执行各种修改和改变。本发明的范围仅由所附的权利要求来限制。

Claims (10)

1.一种检测flex布局属性完整性的方法，其特征在于，包括以下步骤：
接收待检测的网站地址；
访问所述网站地址对应的网页并获取所述网页的源码；
从网页源码中查找CSS样式文件；
在CSS样式文件中查找是否有flex属性；
查找到flex属性，则继续检测flex属性的个数；检测flex属性的顺序；
没查找到flex属性，则退出，并提示没有flex属性。
2.根据权利要求1所述的检测flex布局属性完整性的方法，其特征在于，所述访问网站地址对应的网页并获取所述网页源代码是通过后台执行完成的。
3.根据权利要求1所述的检测flex布局属性完整性的方法，其特征在于，所述flex属性包括：
5个display属性，所述5个display属性值分别为-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex；
6个水平居中属性，分别为-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content；
6个垂直居中属性，分别为-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items；
4个平铺方式属性，分别为-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction；
5个换行属性，分别为-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。
4.根据权利要求3所述的检测flex布局属性完整性的方法，其特征在于，所述flex属性的标准属性值放在所有display属性的最后。
5.根据权利要求1所述的检测flex布局属性完整性的方法，其特征在于，将所述flex布局属性完整性的检测结果以消息框显示，包括：
没有查找到所述flex属性，显示此布局方法为非flex布局；
查找到flex属性，且所述属性个数不对或所述属性排列顺序不对，显示此时代码行数和CSS文件名；
查找到flex属性，且所述属性个数和所述属性排列顺序都对，显示flex布局属性完整的提示。
6.一种检测flex布局属性完整性的系统，其特征在于，包括：
网站地址输入模块，用于接收待检测的网站地址；
网页源码获取模块，与所述网站输入模块相连，用于从所述网站输入模块中获取所述网站地址，访问所述网站地址对应的网页并获取所述网页的源代码；
CSS文件获取模块，用于从所述网页源代码中获取CSS样式文件；
Flex属性查找模块，用于从CSS样式文件中查找flex属性；
Flex属性个数检测模块，用于检测CSS文件中flex属性的个数；
Flex属性顺序检测模块，用于检测CSS文件中flex属性中的各display属性的顺序。
7.根据权利要求6所述的检测flex布局属性完整性的系统，其特征在于，所述访问网站地址对应的网页并获取所述网页源代码是通过后台执行完成的。
8.根据权利要求6所述的检测flex布局属性完整性的系统，其特征在于，所述flex属性包括：
5个display属性，所述5个display属性值分别为-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex；
6个水平居中属性，分别为-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content；
6个垂直居中属性，分别为-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items；
4个平铺方式属性，分别为-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction；
5个换行属性，分别为-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。
9.根据权利要求8所述的检测flex布局属性完整性的系统，其特征在于，所述flex属性的标准属性值放在所有display属性的最后。
10.根据权利要求6所述的检测flex布局属性完整性的系统，其特征在于，将所述flex布局属性完整性的检测结果以消息框显示，包括：
没有查找到所述flex属性，显示此布局方法为非flex布局；
查找到flex属性，且所述属性个数不对或所述属性排列顺序不对，显示此时代码行数和CSS文件名；
查找到flex属性，且所述属性个数和所述属性排列顺序都对，显示flex布局属性完整的提示。
CN201710014376.1A 2017-01-09 2017-01-09 一种检测flex布局属性完整性的方法及系统 Pending CN106874193A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710014376.1A CN106874193A (zh) 2017-01-09 2017-01-09 一种检测flex布局属性完整性的方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710014376.1A CN106874193A (zh) 2017-01-09 2017-01-09 一种检测flex布局属性完整性的方法及系统

Publications (1)

Publication Number Publication Date
CN106874193A true CN106874193A (zh) 2017-06-20

Family

ID=59165302

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710014376.1A Pending CN106874193A (zh) 2017-01-09 2017-01-09 一种检测flex布局属性完整性的方法及系统

Country Status (1)

Country Link
CN (1) CN106874193A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110489117A (zh) * 2018-05-15 2019-11-22 车伯乐（北京）信息科技有限公司 一种网页布局方法及装置

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101989303A (zh) * 2010-11-02 2011-03-23 浙江大学 网站无障碍检测的自动化方法
CN103809941A (zh) * 2012-11-07 2014-05-21 江苏仕德伟网络科技股份有限公司 一种判断网页是否为桥页的方法
CN104156307A (zh) * 2014-07-03 2014-11-19 安徽景行信息科技有限公司 一种浏览器兼容性检测方法和系统
CN104375931A (zh) * 2013-08-15 2015-02-25 北京齐尔布莱特科技有限公司 一种移动浏览器特性检测及结果统计方法
CN104408208A (zh) * 2014-12-22 2015-03-11 上海斐讯数据通信技术有限公司 一种html5布局检测方法及系统
CN105868404A (zh) * 2016-04-20 2016-08-17 上海斐讯数据通信技术有限公司 一种自动检测css表达式的方法及装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101989303A (zh) * 2010-11-02 2011-03-23 浙江大学 网站无障碍检测的自动化方法
CN103809941A (zh) * 2012-11-07 2014-05-21 江苏仕德伟网络科技股份有限公司 一种判断网页是否为桥页的方法
CN104375931A (zh) * 2013-08-15 2015-02-25 北京齐尔布莱特科技有限公司 一种移动浏览器特性检测及结果统计方法
CN104156307A (zh) * 2014-07-03 2014-11-19 安徽景行信息科技有限公司 一种浏览器兼容性检测方法和系统
CN104408208A (zh) * 2014-12-22 2015-03-11 上海斐讯数据通信技术有限公司 一种html5布局检测方法及系统
CN105868404A (zh) * 2016-04-20 2016-08-17 上海斐讯数据通信技术有限公司 一种自动检测css表达式的方法及装置

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110489117A (zh) * 2018-05-15 2019-11-22 车伯乐（北京）信息科技有限公司 一种网页布局方法及装置

Similar Documents

Publication Publication Date Title
US10713149B2 (en) Processing automation scripts of software
CN105190548B (zh) 用于自动分析软件风险的方法和系统
CN104407980B (zh) 移动应用自动化测试装置和方法
US9268665B2 (en) System and method for identifying fault prone computer code files
US20150082263A1 (en) Merit-based characterization of assertions in hardware design verification
CN105868096B (zh) 用于在浏览器中显示web页面测试结果的方法、装置及设备
CN102567166B (zh) 一种显卡测试方法及测试系统
CN103995780B (zh) 一种基于语句频度统计的程序错误定位方法
CN105138461A (zh) 一种应用程序的接口测试方法及装置
US12079298B2 (en) Methods and systems for browser extension used to generate relative XPath, absolute XPath and/or CSS selectors
CN102541917B (zh) 用于验证Web页面布局的方法和系统
TW201216048A (en) Test system
Khan et al. Metric based testability model for object oriented design (MTMOOD)
CN112417798A (zh) 一种时序测试方法、装置、电子设备及存储介质
CN108334588A (zh) 一种用户标签构建方法及装置
CN103150250A (zh) 应用程序性能检测系统和应用程序性能检测方法
CN103631706B (zh) 一种浏览器测试方法和装置
CN105740487A (zh) 基于工艺设计包的版图与原理图一致性验证方法
Guldner et al. Development and evaluation of a reference measurement model for assessing the resource and energy efficiency of software products and components—Green Software Measurement Model (GSMM)
CN103390048A (zh) 链接地址更新方法和装置
US20100194436A1 (en) Verification support system and method
CN103544257A (zh) 网页质量检测方法和装置
CN111773728A (zh) 数据表测试方法、装置、设备及存储介质
CN103365772B (zh) 软件测试自动评价装置以及方法
CN107066302A (zh) 缺陷检测方法、装置及服务终端

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
WD01 Invention patent application deemed withdrawn after publication
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20170620