Brain storming a method of validating a HTML table's content with Watir-webdrive
2020-02-16 17:38
441 查看
Question:
I am trying to work out a method to check the content of an HTML table with Watir-webdriver. Basically I want to validate the table contents against a saved valid table (CSV file) and they are the same after a refresh or redraw action.
Ideas I've come up with so far are to:
- Grab the table HTML and compare that as a string with the baseline value.
- Iterate through each cell and compare the HTML or text content.
- Generate a 2D array representation on the table contents and do an array compare.
What would be the fastest/best approach? Do you have insights on how you handled a similar problem?
Here is an example of the table:
<table id="attr-table"><thead><tr><th id="attr-action-col"><input type="checkbox" id="attr-action-col_box" class="attr-action-box" value=""></th><th id="attr-scope-col"></th><th id="attr-workflow-col">Status</th><th id="attr-type-col"></th><th id="attr-name-col">Name<span class="ui-icon ui-icon-triangle-1-n"></span></th><th id="attr-value-col">Francais Value</th></tr></thead><tbody><tr id="attr-row-209"><td id="attr_action_209" class="attr-action-col"><input type="checkbox" id="attr_action_209_box" class="attr-action-box" value=""></td><td id="attr_scope_209" class="attr-scope-col"><a href="#" class="ws-invoke-editor" id="attr_scope_209_a"><img src="images/attrib_bullet_global.png" title="global"></a></td><td id="attr_workflow_209" class="attr-workflow-col"></td><td id="attr_type_209" class="attr-type-col"><a href="#" class="ws-invoke-editor" id="attr_type_209_a"><img src="images/attrib_text.png"></a></td><td id="attr_name_209" class="attr-name-col"><a href="#" class="ws-invoke-editor" id="attr_name_209_a">Name of: Catalogue</a></td><td id="attr_value_209" class="attr-value-col"><a href="#" class="ws-invoke-editor lang_10" id="attr_value_209_a"><p class="acms ws-editable-content lang_10">2010 EI-176</p></a></td></tr><tr id="attr-row-316"><td id="attr_action_316" class="attr-action-col"><input type="checkbox" id="attr_action_316_box" class="attr-action-box" value=""></td><td id="attr_scope_316" class="attr-scope-col"><a href="#" class="ws-invoke-editor" id="attr_scope_316_a"><img src="images/attrib_bullet_global.png" title="global"></a></td><td id="attr_workflow_316" class="attr-workflow-col"></td><td id="attr_type_316" class="attr-type-col"><a href="#" class="ws-invoke-editor" id="attr_type_316_a"><img src="images/attrib_text.png"></a></td><td id="attr_name_316" class="attr-name-col"><a href="#" class="ws-invoke-editor" id="attr_name_316_a">_[Key] Media key</a></td><td id="attr_value_316" class="attr-value-col"><a href="#" class="ws-invoke-editor lang_10" id="attr_value_316_a"><p class="acms ws-editable-content lang_10"><span class="acms acms-choice" contenteditable="false" id="568">163</span></p></a></td></tr><tr id="attr-row-392"><td id="attr_action_392" class="attr-action-col"><input type="checkbox" id="attr_action_392_box" class="attr-action-box" value=""></td><td id="attr_scope_392" class="attr-scope-col"><a href="#" class="ws-invoke-editor" id="attr_scope_392_a"><img src="images/attrib_bullet_global.png" title="global"></a></td><td id="attr_workflow_392" class="attr-workflow-col"></td><td id="attr_type_392" class="attr-type-col"><a href="#" class="ws-invoke-editor" id="attr_type_392_a"><img src="images/attrib_numeric.png"></a></td><td id="attr_name_392" class="attr-name-col"><a href="#" class="ws-invoke-editor" id="attr_name_392_a">_[Key] Numéro d'ordre</a></td><td id="attr_value_392" class="attr-value-col"><a href="#" class="ws-invoke-editor lang_10" id="attr_value_392_a"><p class="acms ws-editable-content lang_10">2</p></a></td></tr></tbody></table>
Answers
1:ust one idea I came up with. I used Hash and Class object instead of 2D array.[/code]
foo.csv
209,global,text.Catalogue,2010 EI-176392,global,numeric,Numéro d'ordre,2
require 'csv'expected_datas = CSV.readlines('foo.csv').map do |row| { :id => row[0], :scope => row[1], :type => row[2], :name => row[3], :value => row[4] }endclass Data attr_reader :id,:scope,:type,:name,:value def initialize(tr) id = tr.id.slice(/attr-row-([0-9]+)/,1) scope = tr.td(:id,/scope/).img.src.slice(/attr_bullet_(.+?).png/,1) type = tr.td(:id,/type/).img.src.slice(/attrib_(.+?).png/,1) name = tr.td(:id,/name/).text value = tr.td(:id,/value/).text endendbrowser = Watir::Browser.newbrowser.goto 'foobar'datas = browser.table(:id,'attr-table').tbody.trs.map{|tr| Data.new(tr)}datas.zip(expected_datas).each do |data,expected_data| Data.instance_methods(false).each do |method| data.send(method).should == expected_data[method.to_sym] endend# something action (refresh or redraw action)browser.refreshafter_datas = browser.table(:id,'attr-table').tbody.trs.map{|tr| Data.new(tr)}datas.zip(after_datas).each do |data,after_data| Data.instance_methods(false).each do |method| data.send(method).should == after_data.send(method) endend
2:
You could go for exact match
before_htmltable <=> after_htmltable
Or you could strip whitespace
before_htmltable.gsub(/\s+/, ' ') <=> after_htmltable.gsub(/\s+/, ' ')
I would think that creating the array then comparing each element would be more expensive.
Dave
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- HTM载入报错:XHTML 1.0 检验 -- HTML 标签不识别
- Servlet,html实现定时刷新到另外一个页面
- 将ajax获取的内容添加到HTML后如何操作DOM修改属性
- 关于HTML学习整理(一)
- HTML—项目实战(注册界面的设计以及实现)
- element.insertAdjacentHTML的用法
- HTML常用标签
- html的标签,为图片添加自定义热点!
- 前端面试知识点汇总 - HTML
- HTML 在线播放flv、MP4 超简单插件----flowplayer
- HTML基础
- html课后笔记
- 2017学习HTML之路
- 2019前端html面试题总和!无答案
- .text()设置文本,.html()设置html, .val()设置值的使用
- HTML 标记一览
- XML的简介及其与HTML的区别及联系
- HTML常用标签总结
- HTML元素可编辑的属性
- Html.DropDownList 三级联动