在html报告中单击按钮时如何在单独的窗口中显示图像

时间:2019-05-30 10:27:33

标签: javascript python html

我生成了一个html报告,其中在其中一列中显示了不同屏幕的通过和失败情况以及图像比较。我们被告知在COMMENTS字段中放置一个按钮,其中包含“ CLICK”按钮和两个图像(Expected和Actual)。 这是我写的代码:

def initialize(self,ApplicationName,outputPath):
        try:
            self.file=outputPath + "\\" + ApplicationName+"_"+time.strftime("%Y%m%d_%H%M%S")+ '.html'
            self.htmlapp = open(self.file,"w")
            self.htmlapp.write("<!DOCTYPE html><html><head>")
            self.htmlapp.write("<style>table {font-family: arial,table-layout:fixed; sans-serif;border-collapse: collapse;<!-- width: 100%; -->} ")
            self.htmlapp.write("td, th {border: 1px solid #000000;border: 1px solid #000000;text-align: left;padding: 8px;}tr:nth-child(even) {background-color: #dddddd;}  ")
            self.htmlapp.write(".accordion1 {background-color: #ffcccc;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;} ")
            self.htmlapp.write(".accordion2 {background-color: #D3D3D3;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;} ")

            self.htmlapp.write(".active, .accordion1:hover {background-color: #ffffff;}")
            self.htmlapp.write(".active, .accordion2:hover {background-color: #ffffff;}")

            self.htmlapp.write(".panel {display: none;background-color: white;overflow: hidden;}")
            self.htmlapp.write(".panel1{overflow-y:scroll;height:200px;}")
          #  self.htmlapp.write(".ex3 {")
##        self.htmlapp.write("background-color: lightblue;")
           # self.htmlapp.write("height: 140px;")
##        self.htmlapp.write("width: 200px;")
          #  self.htmlapp.write("overflow-y: auto;")
          #  self.htmlapp.write("}")
            self.htmlapp.write("#img {float:left;margin-right:10px;}")
            self.htmlapp.write(".hide {display:none;}")
            self.htmlapp.write("</style></head>")
            self.htmlapp.write("<body><h2 align=\"center\">"+ ApplicationName + " Test Report</h2>")

#imagedisplay function
 def DisplayImage(self,srcimage,expimg):
        try:

            self.htmlapp.write("<td><a href=\"#\" id=\"img"+str(self.inc)+"\" class=\"hide\"  value=\"show my Image\">click here</a>")
            self.htmlapp.write("<img id=\"myimage_"+str(self.inc)+"\" class=\"hide\" src="+srcimage+"  alt=\"check image path\" width=\"100px\" height=\"100px\">")
            self.htmlapp.write("<img id=\"myimage"+str(self.inc)+"\" class=\"hide\" src="+expimg+"  alt=\"check image path\" width=\"100px\" height=\"100px\"></td>")
            self.inc+=1

#comments field function for report generation
def resultstableupdate(self,list,type):
    try:
        list_len = len(list)
        self.htmlapp.write("<tr>")

        list[1] = datetime.datetime.now().strftime("%H:%M:%S")
        for listvalue in range(list_len):#0-5

            if(listvalue==self.ExpectedValue):
                if type=="img" and list[self.status]==1:
                    self.htmlapp.write("<th>"'<img src=\''+list[self.ExpectedValue]+'\'>'+"</th>")
                else:
                    self.htmlapp.write("<th>"+str(list[self.ExpectedValue])+"</th>")
                #continue
            elif(listvalue==self.status):
                result_status = list[listvalue]
                if (result_status==0):
                    self.pass_count=self.pass_count+1
                    self.htmlapp.write("<th style=\"color:#3cb371\">Pass</th>")
                if (result_status==1):
                    self.fails_count=self.fails_count+1
                    self.htmlapp.write("<th style=\"color:#cc0000\">Fail</th>")
            elif (listvalue == self.Comments):
                if type == "img" and result_status == 1:
                    self.htmlapp.write("<th>"'<img src=\'' + self.DisplayImage(list[self.Comments],list[self.ExpectedValue] )+ '\'>' + "</th>")
                else:

                    self.htmlapp.write("<th>" + str(list[self.Comments]) + "</th>")
            else:
                result_status=list[listvalue]
                self.htmlapp.write("<th>"+str(result_status)+"</th>")

#java script for accordian and close functions

    def script(self):
        self.htmlapp.write("<script>"
                            "var acc = document.getElementsByClassName(\"accordion1\");"
                            "var i;"
                            "for (i = 0; i < acc.length; i++) {"
                            "acc[i].addEventListener(\"click\", function() {"
                            "this.classList.toggle(\"active\");"
                            "var panel = this.nextElementSibling;"
                            #"if (panel.style.maxHeight){panel.style.maxHeight = null;} else {panel.style.maxHeight = panel.scrollHeight + \"px\";}});}"
                             "if (panel.style.display === \"block\") {"
                             "panel.style.display = \"none\";"
                            "} else {"
                            "panel.style.display = \"block\";"
                            "}});}"
                           "var acc = document.getElementsByClassName(\"accordion2\");"
                           "var i;"
                           "for (i = 0; i < acc.length; i++) {"
                           "acc[i].addEventListener(\"click\", function() {"
                           "this.classList.toggle(\"active\");"
                           "var panel = this.nextElementSibling;"
##                         "if (panel.style.maxHeight){panel.style.maxHeight = null;} else {panel.style.maxHeight = panel.scrollHeight + \"px\";}});}"
                            "if (panel.style.display === \"block\") {"
                            "panel.style.display = \"none\";"
                            "} else {"
                            "panel.style.display = \"block\";"
                            "}});}"

                            "function init(){"
                           "var cc =0"
                           "obj0=document.getElementById('img'); "
                          "obj1=document.getElementById('myimage_'+cc); "
                            "obj2=document.getElementById('myimage'+cc); "
                            "obj0.className=''; "
                         "document.getElementById('img').onclick=function() { "
                            "obj1.className=='hide'? "
                           "(obj1.className='',this.value='hide my Image'): "
                           "(obj1.className='hide',this.value='show my Image'); "
                           "obj2.className=='hide'? "
                           "(obj2.className='',this.value='hide my Image'): "
                           "(obj2.className='hide',this.value='show my Image'); "
                           "} "
                           "cc+=1"
                          "} "
                            "window.addEventListener? "
                            "window.addEventListener('load',init,false): "
                           " window.attachEvent('onload',init); "

                            "</script>")
# @brief This function is used close the html
    def close(self,):
        try:
            self.htmlapp.write("</body></html>")
            self.script()
            self.Panelend()
            self.htmlapp.close()

当我运行代码时,仅针对首次失败的情况而不是针对所有情况获得“ CLICK”选项。我对html和js的了解不多。有人指导我会很高兴。

结果: Result1 Result2 when clicked Result3 No Click

0 个答案:

没有答案