├── .gitignore ├── HTMLReport ├── TableFilter │ ├── TF_Themes │ │ ├── Default │ │ │ ├── TF_Default.css │ │ │ └── images │ │ │ │ ├── bg_infDiv.jpg │ │ │ │ ├── bg_th.jpg │ │ │ │ ├── btn_eraser.gif │ │ │ │ ├── btn_first_page.gif │ │ │ │ ├── btn_last_page.gif │ │ │ │ ├── btn_next_page.gif │ │ │ │ ├── btn_over_eraser.gif │ │ │ │ ├── btn_over_first_page.gif │ │ │ │ ├── btn_over_last_page.gif │ │ │ │ ├── btn_over_next_page.gif │ │ │ │ ├── btn_over_previous_page.gif │ │ │ │ ├── btn_previous_page.gif │ │ │ │ └── img_loading.gif │ │ ├── MyTheme │ │ │ ├── MyTheme.css │ │ │ └── images │ │ │ │ ├── bg_headers.jpg │ │ │ │ ├── bg_infDiv.jpg │ │ │ │ ├── btn_filter.png │ │ │ │ ├── btn_first_page.gif │ │ │ │ ├── btn_last_page.gif │ │ │ │ ├── btn_next_page.gif │ │ │ │ ├── btn_previous_page.gif │ │ │ │ └── img_loading.gif │ │ ├── SkyBlue │ │ │ ├── TF_SkyBlue.css │ │ │ └── images │ │ │ │ ├── bg_skyblue.gif │ │ │ │ ├── btn_first_page.gif │ │ │ │ ├── btn_last_page.gif │ │ │ │ ├── btn_next_page.gif │ │ │ │ ├── btn_prev_page.gif │ │ │ │ ├── icn_clear_filters.png │ │ │ │ └── img_loading.gif │ │ ├── blank.png │ │ ├── btn_clear_filters.png │ │ ├── btn_filter.png │ │ ├── btn_first_page.gif │ │ ├── btn_last_page.gif │ │ ├── btn_next_page.gif │ │ ├── btn_previous_page.gif │ │ ├── downsimple.png │ │ ├── icn_filter.gif │ │ ├── icn_filterActive.gif │ │ └── upsimple.png │ └── filtergrid.css ├── preview.css ├── preview.html └── preview.js ├── README.md ├── babel.config.js ├── background.js ├── css ├── bootstrap.min.css └── popUp.css ├── genetareZip.ps1 ├── icons ├── icon.png ├── iconbig.png ├── iconbig_.png ├── iconmed.png └── iconsmall.png ├── images ├── 001-graphic.svg ├── 002-download.svg ├── 003-csv.svg ├── 004-up-arrow.svg ├── bug.svg ├── crop.png ├── device-camera.svg ├── diff-added.svg ├── light-bulb.svg ├── note.svg ├── question.svg └── trashcan.svg ├── jest.config.js ├── jest.setup.js ├── js ├── bootstrap.bundle.min.js ├── content_script.js ├── jquery-1.11.3.min.js └── popup.js ├── lib ├── canvasjs.min.js ├── chart.umd.js ├── date.js └── tablefilter_all_min.js ├── manifest.json ├── package-lock.json ├── package.json ├── popup.html ├── screenshots ├── addAnnotation.png ├── addAnnotation_1400.png ├── addAnnotation_440.png ├── extension.PNG ├── main.png ├── main_440.png ├── new_Annotation.PNG ├── report.PNG ├── report.png ├── report_1400.png └── report_440.png ├── src ├── Annotation.js ├── ExportSessionCSV.js ├── JSonSessionService.js ├── Session.js └── browserInfo.js ├── start_test_server.ps1 └── test └── spec ├── Annotation.test.js ├── ExportSessionCSV.test.js ├── JSonSessionService.test.js ├── Session.test.js └── browserInfo.test.js /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/intellij 3 | 4 | ### Intellij ### 5 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm 6 | 7 | *.iml 8 | 9 | ## Directory-based project format: 10 | .idea/* 11 | # if you remove the above rule, at least ignore the following: 12 | 13 | # User-specific stuff: 14 | # .idea/workspace.xml 15 | # .idea/tasks.xml 16 | # .idea/dictionaries 17 | # .idea/shelf 18 | 19 | # Sensitive or high-churn files: 20 | # .idea/dataSources.ids 21 | # .idea/dataSources.xml 22 | # .idea/sqlDataSources.xml 23 | # .idea/dynamic.xml 24 | # .idea/uiDesigner.xml 25 | 26 | # Gradle: 27 | # .idea/gradle.xml 28 | # .idea/libraries 29 | 30 | # Mongo Explorer plugin: 31 | # .idea/mongoSettings.xml 32 | 33 | ## File-based project format: 34 | *.ipr 35 | *.iws 36 | 37 | ## Plugin-specific files: 38 | 39 | # IntelliJ 40 | /out/ 41 | 42 | # mpeltonen/sbt-idea plugin 43 | .idea_modules/ 44 | 45 | # JIRA plugin 46 | atlassian-ide-plugin.xml 47 | 48 | # Crashlytics plugin (for Android Studio and IntelliJ) 49 | com_crashlytics_export_strings.xml 50 | crashlytics.properties 51 | crashlytics-build.properties 52 | fabric.properties 53 | 54 | .vscode/launch.json 55 | *.zip 56 | .DS_Store 57 | node_modules/ 58 | -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/Default/TF_Default.css: -------------------------------------------------------------------------------- 1 | /*==================================================== 2 | - HTML Table Filter Generator Default Theme 3 | - Do not hesitate to edit classes below to 4 | change theme appearance 5 | =====================================================*/ 6 | 7 | /* TABLE LAYOUT 8 | =====================================================*/ 9 | table.TF{ 10 | font:normal 12px arial, tahoma, helvetica, sans-serif !important; 11 | border-left:1px solid #ccc !important; border-top:none !important; 12 | border-right:none !important; border-bottom:none !important; 13 | } 14 | table.TF th{ 15 | background:#EBECEE url(images/bg_th.jpg) left top repeat-x !important; 16 | border-bottom:1px solid #D0D0D0 !important; border-right:1px solid #D0D0D0 !important; 17 | border-left:1px solid #fff !important; border-top:1px solid #fff !important; 18 | padding:2px !important; color:#333 !important; height:25px !important; 19 | } 20 | 21 | table.TF td{ border-bottom:1px dotted #999 !important; padding:5px !important; } 22 | 23 | /* FILTERS 24 | =====================================================*/ 25 | /* filter grid row appearance */ 26 | .fltrow{ background-color:#EBECEE !important; } 27 | .fltrow th, .fltrow td{ border-bottom:1px dotted #666 !important; padding:1px 3px 1px 3px !important; } 28 | 29 | /* filter (input) appearance */ 30 | .flt, select.flt, select.flt_multi, .flt_s, .single_flt, .div_checklist{ border:1px solid #999 !important; } 31 | input.flt{ width:99% !important; } 32 | 33 | /* TOP BAR 34 | =====================================================*/ 35 | /* div containing left, middle and right divs */ 36 | .inf{ background:#f4f4f4 url(images/bg_infDiv.jpg) 0 0 repeat-x !important; } 37 | 38 | /* RESET BUTTON 39 | =====================================================*/ 40 | /* Reset button */ 41 | input.reset{ 42 | width:19px; height:19px; cursor:pointer !important; 43 | border:0 !important; vertical-align:middle; 44 | background:transparent url(images/btn_eraser.gif) center center no-repeat !important; 45 | } 46 | input.reset:hover{ background:transparent url(images/btn_over_eraser.gif) center center no-repeat !important; } 47 | 48 | /* PAGING 49 | =====================================================*/ 50 | /* Paging elements */ 51 | input.pgInp{ 52 | width:19px; height:19px; cursor:pointer !important; 53 | border:0 !important; 54 | } 55 | .nextPage{ background:transparent url(images/btn_next_page.gif) center center no-repeat !important; } 56 | .previousPage{ background:transparent url(images/btn_previous_page.gif) center center no-repeat !important; } 57 | .firstPage{ background:transparent url(images/btn_first_page.gif) center center no-repeat !important; } 58 | .lastPage{ background:transparent url(images/btn_last_page.gif) center center no-repeat !important; } 59 | .nextPage:hover{ background:transparent url(images/btn_over_next_page.gif) center center no-repeat !important; } 60 | .previousPage:hover{ background:transparent url(images/btn_over_previous_page.gif) center center no-repeat !important; } 61 | .firstPage:hover{ background:transparent url(images/btn_over_first_page.gif) center center no-repeat !important; } 62 | .lastPage:hover{ background:transparent url(images/btn_over_last_page.gif) center center no-repeat !important; } 63 | select.rspg{ font-size:10px; } 64 | 65 | /* GRID LAYOUT 66 | =====================================================*/ 67 | /*Main container*/ 68 | div.grd_Cont{ background-color:#EBECEE !important; border:1px solid #ccc !important; padding:0 !important; } 69 | /*headers' table container*/ 70 | div.grd_headTblCont{ background-color:#EBECEE !important; border-bottom:none !important; } 71 | /*div.grd_tblCont{ overflow-y:auto !important; }*/ 72 | div.grd_tblCont table{ border-right:none !important; } 73 | /* Headers */ 74 | div.grd_tblCont table th, div.grd_headTblCont table th, div.grd_headTblCont table td{ 75 | background:#EBECEE url(images/bg_th.jpg) left top repeat-x !important; 76 | border-bottom:1px solid #D0D0D0 !important; border-right:1px solid #D0D0D0 !important; 77 | border-left:1px solid #fff !important; border-top:1px solid #fff !important; 78 | } 79 | /* div containing left, middle and right divs */ 80 | .grd_inf{ 81 | background:#D7D7D7 url(images/bg_infDiv.jpg) 0 0 repeat-x !important; 82 | border-top:1px solid #D0D0D0 !important; height:29px !important; 83 | } 84 | /*row bg alternating color*/ 85 | div.grd_Cont .even{ background-color:#fff; } 86 | div.grd_Cont .odd{ background-color:#D5D5D5; } 87 | 88 | /* LOADER 89 | =====================================================*/ 90 | /* Loader */ 91 | .loader{ border:1px solid #999; background:#fff; } 92 | .defaultLoader{ width:32px; height:32px; background:transparent url(images/img_loading.gif) 0 0 no-repeat !important; } 93 | 94 | /* ALTERNATING ROW BACKGROUNDS 95 | =====================================================*/ 96 | /* Alternating backgrounds */ 97 | .even{ background-color:#fff; }/*row bg alternating color*/ 98 | .odd{ background-color:#D5D5D5; }/*row bg alternating color*/ -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/Default/images/bg_infDiv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/Default/images/bg_infDiv.jpg -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/Default/images/bg_th.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/Default/images/bg_th.jpg -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/Default/images/btn_eraser.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/Default/images/btn_eraser.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/Default/images/btn_first_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/Default/images/btn_first_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/Default/images/btn_last_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/Default/images/btn_last_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/Default/images/btn_next_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/Default/images/btn_next_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/Default/images/btn_over_eraser.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/Default/images/btn_over_eraser.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/Default/images/btn_over_first_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/Default/images/btn_over_first_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/Default/images/btn_over_last_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/Default/images/btn_over_last_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/Default/images/btn_over_next_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/Default/images/btn_over_next_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/Default/images/btn_over_previous_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/Default/images/btn_over_previous_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/Default/images/btn_previous_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/Default/images/btn_previous_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/Default/images/img_loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/Default/images/img_loading.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/MyTheme/MyTheme.css: -------------------------------------------------------------------------------- 1 | /*==================================================== 2 | - HTML Table Filter Generator Custom Theme 3 | - Do not hesitate to edit classes below to 4 | change theme appearance 5 | =====================================================*/ 6 | 7 | /* TABLE LAYOUT 8 | =====================================================*/ 9 | table.TF{ 10 | font:13px "Trebuchet MS",Verdana,Helvetica,Arial,sans-serif !important; 11 | border-left:1px dotted #81963B !important; border-top:none !important; 12 | border-right:0 !important; border-bottom:none !important; 13 | } 14 | table.TF th{ 15 | background:#39424B url(images/bg_headers.jpg) left top repeat-x !important;; 16 | border-bottom:0 !important; border-right:1px dotted #D0D0D0 !important; 17 | border-left:0 !important; border-top:0 !important; 18 | padding:0 4px 0 4px !important; color:#fff !important; height:35px !important; 19 | } 20 | 21 | table.TF td{ border-bottom:1px dotted #81963B; border-right:1px dotted #81963B; padding:5px !important; } 22 | 23 | /* FILTERS 24 | =====================================================*/ 25 | /* filter grid row appearance */ 26 | .fltrow{ background-color:#81963B !important; } 27 | .fltrow th, .fltrow td{ 28 | border-bottom:1px dotted #39424B !important; border-right:1px dotted #fff !important; 29 | border-left:0 !important; border-top:0 !important; 30 | padding:1px 3px 1px 3px !important; 31 | } 32 | 33 | /* filter (input) appearance */ 34 | .flt, select.flt, select.flt_multi, .flt_s, .single_flt, .div_checklist{ border:1px solid #687830 !important; } 35 | input.flt{ width:99% !important; } 36 | 37 | /* TOP BAR 38 | =====================================================*/ 39 | /* div containing left, middle and right divs */ 40 | .inf{ background:#f4f4f4 url(images/bg_infDiv.jpg) left bottom repeat-x !important; } 41 | 42 | /* RESET BUTTON 43 | =====================================================*/ 44 | /* Reset button */ 45 | input.reset{ 46 | width:53px; height:19px; cursor:pointer !important; 47 | border:0 !important; vertical-align:middle; 48 | background:transparent url(images/btn_filter.png) center center no-repeat !important; 49 | } 50 | input.reset:hover{ background:#CAD1D6 url(images/btn_filter.png) center center no-repeat !important; } 51 | 52 | /* PAGING 53 | =====================================================*/ 54 | /* Paging elements */ 55 | 56 | /* left div */ 57 | .ldiv{ width:40% !important; } 58 | /* middle div */ 59 | .mdiv{ width:34% !important; text-align:left !important; } 60 | /* right div */ 61 | .rdiv{ width:20% !important; } 62 | 63 | input.pgInp{ 64 | width:19px; height:19px; cursor:pointer !important; 65 | border:0 !important; 66 | } 67 | .nextPage{ background:transparent url(images/btn_next_page.gif) center center no-repeat !important; } 68 | .previousPage{ background:transparent url(images/btn_previous_page.gif) center center no-repeat !important; } 69 | .firstPage{ background:transparent url(images/btn_first_page.gif) center center no-repeat !important; } 70 | .lastPage{ background:transparent url(images/btn_last_page.gif) center center no-repeat !important; } 71 | .nextPage:hover{ background:#CAD1D6 url(images/btn_next_page.gif) center center no-repeat !important; } 72 | .previousPage:hover{ background:#CAD1D6 url(images/btn_previous_page.gif) center center no-repeat !important; } 73 | .firstPage:hover{ background:#CAD1D6 url(images/btn_first_page.gif) center center no-repeat !important; } 74 | .lastPage:hover{ background:#CAD1D6 url(images/btn_last_page.gif) center center no-repeat !important; } 75 | select.rspg{ font-size:10px; } 76 | 77 | /* GRID LAYOUT 78 | =====================================================*/ 79 | /*Main container*/ 80 | div.grd_Cont{ background:#81963B url(images/bg_headers.jpg) left top repeat-x !important; border:1px solid #ccc !important; padding:0 1px 1px 1px !important; } 81 | /*headers' table container*/ 82 | div.grd_headTblCont{ background-color:#EBECEE !important; border-bottom:none !important; } 83 | /*div.grd_tblCont{ overflow-y:auto !important; }*/ 84 | div.grd_tblCont table{ border-right:none !important; } 85 | /* Headers */ 86 | div.grd_tblCont table th, div.grd_headTblCont table th{ 87 | background:transparent url(images/bg_headers.jpg) 0 0 repeat-x !important;; 88 | border-bottom:0 !important; border-right:1px dotted #D0D0D0 !important; 89 | border-left:0 !important; border-top:0 !important; 90 | padding:0 4px 0 4px !important; color:#fff !important; height:35px !important; 91 | } 92 | /* filters cells */ 93 | div.grd_headTblCont table td{ 94 | border-bottom:1px dotted #39424B !important; border-right:1px dotted #fff !important; 95 | border-left:0 !important; border-top:0 !important; 96 | background-color:#81963B !important; 97 | padding:1px 3px 1px 3px !important; 98 | } 99 | 100 | /* div containing left, middle and right divs */ 101 | .grd_inf{ 102 | background:#f4f4f4 url(images/bg_infDiv.jpg) center bottom repeat-x !important; 103 | border-top:1px solid #D0D0D0 !important; height:29px !important; padding-top:2px !important; 104 | } 105 | /*row bg alternating color*/ 106 | div.grd_Cont .even{ background-color:#BCCD83; } 107 | div.grd_Cont .odd{ background-color:#fff; } 108 | 109 | /* LOADER 110 | =====================================================*/ 111 | /* Loader */ 112 | .loader{ border:0 !important; background:transparent !important; margin:185px auto !important; } 113 | .defaultLoader{ width:32px; height:32px; background:transparent url(images/img_loading.gif) 0 0 no-repeat !important; } 114 | 115 | /* ALTERNATING ROW BACKGROUNDS 116 | =====================================================*/ 117 | /* Alternating backgrounds */ 118 | .even{ background-color:#BCCD83; }/*row bg alternating color*/ 119 | .odd{ background-color:#fff; }/*row bg alternating color*/ -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/MyTheme/images/bg_headers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/MyTheme/images/bg_headers.jpg -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/MyTheme/images/bg_infDiv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/MyTheme/images/bg_infDiv.jpg -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/MyTheme/images/btn_filter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/MyTheme/images/btn_filter.png -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/MyTheme/images/btn_first_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/MyTheme/images/btn_first_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/MyTheme/images/btn_last_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/MyTheme/images/btn_last_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/MyTheme/images/btn_next_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/MyTheme/images/btn_next_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/MyTheme/images/btn_previous_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/MyTheme/images/btn_previous_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/MyTheme/images/img_loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/MyTheme/images/img_loading.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/SkyBlue/TF_SkyBlue.css: -------------------------------------------------------------------------------- 1 | /*==================================================== 2 | - HTML Table Filter Generator SkyBlue Theme 3 | - Do not hesitate to edit classes below to 4 | change theme appearance 5 | =====================================================*/ 6 | 7 | /* TABLE LAYOUT 8 | =====================================================*/ 9 | table.TF{ 10 | padding:0; color:#000; 11 | font:12px/13px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important; 12 | border-right:1px solid #A4BED4; 13 | border-top:1px solid #A4BED4; 14 | border-left:1px solid #A4BED4; 15 | border-bottom:0; 16 | } 17 | table.TF th{ 18 | margin:0; padding:5px; color:inherit; 19 | background:#D1E5FE url("images/bg_skyblue.gif") 0 0 repeat-x; 20 | border-color:#FDFDFD #A4BED4 #A4BED4 #FDFDFD; 21 | border-width:1px; border-style:solid; 22 | } 23 | 24 | table.TF td{ 25 | margin:0; padding:5px; color:inherit; 26 | border-bottom:1px solid #A4BED4; 27 | border-left:0; border-top:0; border-right:0; 28 | } 29 | 30 | /* FILTERS 31 | =====================================================*/ 32 | /* filter grid row appearance */ 33 | .fltrow{ background-color:#D1E5FE !important; } 34 | .fltrow th, .fltrow td{ border-top:1px dotted #666 !important; border-bottom:1px dotted #666 !important; padding:1px 3px 1px 3px !important; } 35 | 36 | /* filter (input) appearance */ 37 | .flt, select.flt, select.flt_multi, .flt_s, .single_flt, .div_checklist{ border:1px solid #A4BED4 !important; } 38 | input.flt{ width:99% !important; } 39 | 40 | /* TOP BAR 41 | =====================================================*/ 42 | /* div containing left, middle and right divs */ 43 | .inf{ 44 | background:#D9EAED !important; 45 | border:1px solid #99CCCC; 46 | height:25px; color:#004A6F; 47 | border-radius:3px; 48 | -moz-border-radius:3px; 49 | -webkit-border-radius:3px; 50 | } 51 | div.tot, div.status{ border-right:0 !important; } 52 | 53 | .helpBtn{ 54 | margin:0 5px 0 5px; padding: 2px 4px 2px 4px; 55 | color:#004A6F !important; font-size:13px; 56 | border:1px solid transparent !important; 57 | } /* help button */ 58 | .helpBtn:hover{ background-color:#FFE4AB; border:1px solid #FFB552 !important; text-decoration:none; } 59 | div.helpCont{ color:inherit !important: } 60 | 61 | /* RESET BUTTON 62 | =====================================================*/ 63 | /* Reset button */ 64 | input.reset{ 65 | width:19px; height:19px; cursor:pointer !important; 66 | border:1px solid transparent !important; vertical-align:middle; 67 | background:transparent url(images/icn_clear_filters.png) center center no-repeat !important; 68 | } 69 | input.reset:hover{ background:#FFE4AB url(images/icn_clear_filters.png) center center no-repeat !important; border:1px solid #FFB552 !important; } 70 | 71 | /* PAGING 72 | =====================================================*/ 73 | /* Paging elements */ 74 | input.pgInp{ 75 | width:19px; height:19px; cursor:pointer !important; 76 | border:0 !important; 77 | } 78 | .nextPage{ background:transparent url(images/btn_next_page.gif) center center no-repeat !important; border:1px solid transparent !important; } 79 | .previousPage{ background:transparent url(images/btn_prev_page.gif) center center no-repeat !important; border:1px solid transparent !important; } 80 | .firstPage{ background:transparent url(images/btn_first_page.gif) center center no-repeat !important; border:1px solid transparent !important; } 81 | .lastPage{ background:transparent url(images/btn_last_page.gif) center center no-repeat !important; border:1px solid transparent !important; } 82 | .nextPage:hover{ background:#FFE4AB url(images/btn_next_page.gif) center center no-repeat !important; border:1px solid #FFB552 !important; } 83 | .previousPage:hover{ background:#FFE4AB url(images/btn_prev_page.gif) center center no-repeat !important; border:1px solid #FFB552 !important; } 84 | .firstPage:hover{ background:#FFE4AB url(images/btn_first_page.gif) center center no-repeat !important; border:1px solid #FFB552 !important; } 85 | .lastPage:hover{ background:#FFE4AB url(images/btn_last_page.gif) center center no-repeat !important; border:1px solid #FFB552 !important; } 86 | select.rspg{ font-size:10px; } 87 | 88 | /* ACTIVE COLUMN HEADER 89 | =====================================================*/ 90 | .activeHeader{ background:#FFE4AB !important; border:1px solid #FFB552 !important; color:inherit !important; } 91 | 92 | /* GRID LAYOUT 93 | =====================================================*/ 94 | /*Main container*/ 95 | div.grd_Cont{ background-color:#D9EAED !important; border:1px solid #99CCCC !important; padding:0 !important; } 96 | /*headers' table container*/ 97 | div.grd_headTblCont{ background-color:#D9EAED !important; border-bottom:none !important; } 98 | /*div.grd_tblCont{ overflow-y:auto !important; }*/ 99 | div.grd_tblCont table{ border-right:none !important; font:12px/13px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important; } 100 | /* Headers */ 101 | div.grd_tblCont table th, div.grd_headTblCont table th, div.grd_headTblCont table td{ 102 | background:#D9EAED url(images/bg_skyblue.gif) left top repeat-x; 103 | border-bottom:1px solid #A4BED4; border-right:1px solid #A4BED4 !important; 104 | border-left:1px solid #fff !important; border-top:1px solid #fff !important; 105 | padding:5px 2px 5px 2px !important; 106 | } 107 | div.grd_tblCont table td{ 108 | border-bottom:1px solid #A4BED4 !important; border-right:0 !important; 109 | border-left:0 !important; border-top:0 !important; padding:5px 2px 5px 2px !important; 110 | } 111 | 112 | /* div containing left, middle and right divs */ 113 | .grd_inf{ 114 | background:#D9EAED !important; 115 | height:25px; color:#004A6F; 116 | border-top:1px solid #99CCCC !important; 117 | } 118 | .grd_inf .rdiv{ height:28px; } 119 | .grd_inf a{ text-decoration:none; font-weight:bold; } /* help */ 120 | 121 | /* help button */ 122 | .grd_inf a.helpBtn{ vertical-align:middle; margin-top:2px !important; padding-top:1px !important; } 123 | /* row bg alternating color */ 124 | div.grd_Cont .even{ background-color:#fff; } 125 | div.grd_Cont .odd{ background-color:#E3EFFF; } 126 | 127 | /* LOADER 128 | =====================================================*/ 129 | /* Loader */ 130 | .loader{ border:0 !important; background:transparent !important; margin-top:40px; margin-left:0 !important; } 131 | 132 | /* ALTERNATING ROW BACKGROUNDS 133 | =====================================================*/ 134 | /* Alternating backgrounds */ 135 | .even{ background-color:#fff; }/*row bg alternating color*/ 136 | .odd{ background-color:#E3EFFF; }/*row bg alternating color*/ 137 | 138 | /* ezEditTable 139 | =====================================================*/ 140 | 141 | /* Selection */ 142 | .ezActiveRow{ background-color:#FFDC61 !important; color:inherit; } 143 | .ezSelectedRow{ background-color:#FFE4AB !important; color:inherit; } 144 | .ezActiveCell{ 145 | background-color:#fff !important; 146 | color:#000 !important; font-weight:bold; 147 | } 148 | .ezETSelectedCell{ background-color:#FFF !important; font-weight:bold; color:rgb(0,0,0)!important; } -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/SkyBlue/images/bg_skyblue.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/SkyBlue/images/bg_skyblue.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/SkyBlue/images/btn_first_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/SkyBlue/images/btn_first_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/SkyBlue/images/btn_last_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/SkyBlue/images/btn_last_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/SkyBlue/images/btn_next_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/SkyBlue/images/btn_next_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/SkyBlue/images/btn_prev_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/SkyBlue/images/btn_prev_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/SkyBlue/images/icn_clear_filters.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/SkyBlue/images/icn_clear_filters.png -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/SkyBlue/images/img_loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/SkyBlue/images/img_loading.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/blank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/blank.png -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/btn_clear_filters.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/btn_clear_filters.png -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/btn_filter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/btn_filter.png -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/btn_first_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/btn_first_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/btn_last_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/btn_last_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/btn_next_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/btn_next_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/btn_previous_page.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/btn_previous_page.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/downsimple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/downsimple.png -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/icn_filter.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/icn_filter.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/icn_filterActive.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/icn_filterActive.gif -------------------------------------------------------------------------------- /HTMLReport/TableFilter/TF_Themes/upsimple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/TF_Themes/upsimple.png -------------------------------------------------------------------------------- /HTMLReport/TableFilter/filtergrid.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/HTMLReport/TableFilter/filtergrid.css -------------------------------------------------------------------------------- /HTMLReport/preview.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | margin: 0; 4 | padding: 20px; 5 | background-color: #f5f5f5; 6 | } 7 | 8 | #report { 9 | max-width: 1200px; 10 | margin: 0 auto; 11 | background-color: white; 12 | padding: 20px; 13 | border-radius: 8px; 14 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 15 | } 16 | 17 | h1 { 18 | color: #333; 19 | text-align: center; 20 | margin-bottom: 30px; 21 | } 22 | 23 | .session-info { 24 | background-color: #f8f9fa; 25 | padding: 20px; 26 | border-radius: 4px; 27 | margin-bottom: 30px; 28 | } 29 | 30 | .session-info h2 { 31 | color: #444; 32 | margin-top: 0; 33 | } 34 | 35 | .session-info p { 36 | margin: 10px 0; 37 | } 38 | 39 | /* Estilos de la tabla */ 40 | .table { 41 | width: 100%; 42 | border-collapse: collapse; 43 | margin-top: 20px; 44 | } 45 | 46 | .table th, 47 | .table td { 48 | padding: 12px; 49 | text-align: left; 50 | border-bottom: 1px solid #ddd; 51 | } 52 | 53 | .table th { 54 | background-color: #f8f9fa; 55 | font-weight: bold; 56 | } 57 | 58 | /* Estilos para los iconos de anotaciones */ 59 | .annotation-icon { 60 | width: 24px; 61 | height: 24px; 62 | vertical-align: middle; 63 | } 64 | 65 | /* Estilos para las celdas de la tabla */ 66 | .annotationDescription { 67 | max-width: 300px; 68 | white-space: pre-wrap; 69 | word-break: break-word; 70 | } 71 | 72 | .annotationUrl { 73 | max-width: 200px; 74 | word-break: break-all; 75 | font-size: 0.9em; 76 | color: #0066cc; 77 | } 78 | 79 | .screenshot-cell { 80 | width: 50px; 81 | text-align: center; 82 | position: relative; 83 | } 84 | 85 | /* Estilos para las imágenes */ 86 | .previewImage { 87 | width: 24px; 88 | height: 24px; 89 | cursor: pointer; 90 | border: 1px solid #ddd; 91 | border-radius: 4px; 92 | transition: transform 0.2s; 93 | object-fit: cover; 94 | } 95 | 96 | .image-hover-preview { 97 | display: none; 98 | position: fixed; 99 | width: 300px; 100 | height: 300px; 101 | background-color: white; 102 | border: 2px solid #ddd; 103 | border-radius: 4px; 104 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); 105 | z-index: 1000; 106 | pointer-events: none; 107 | overflow: hidden; 108 | } 109 | 110 | .image-hover-preview img { 111 | width: 100%; 112 | height: 100%; 113 | object-fit: contain; 114 | } 115 | 116 | .image-hover-preview.active { 117 | display: block; 118 | } 119 | 120 | /* Mantener los estilos existentes para el click */ 121 | .image-preview { 122 | display: none; 123 | position: fixed; 124 | top: 0; 125 | left: 0; 126 | width: 100%; 127 | height: 100%; 128 | background-color: rgba(0, 0, 0, 0.9); 129 | z-index: 1000; 130 | cursor: pointer; 131 | } 132 | 133 | .image-preview.active { 134 | display: flex; 135 | justify-content: center; 136 | align-items: center; 137 | } 138 | 139 | .image-preview img { 140 | max-width: 90%; 141 | max-height: 90%; 142 | object-fit: contain; 143 | border: 2px solid white; 144 | border-radius: 4px; 145 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 146 | } 147 | 148 | .image-preview::after { 149 | content: '×'; 150 | position: absolute; 151 | top: 20px; 152 | right: 20px; 153 | color: white; 154 | font-size: 30px; 155 | font-weight: bold; 156 | cursor: pointer; 157 | width: 40px; 158 | height: 40px; 159 | line-height: 40px; 160 | text-align: center; 161 | background-color: rgba(0, 0, 0, 0.5); 162 | border-radius: 50%; 163 | transition: background-color 0.2s; 164 | } 165 | 166 | .image-preview::after:hover { 167 | background-color: rgba(0, 0, 0, 0.8); 168 | } 169 | 170 | /* Estilos para el botón de eliminar */ 171 | .deleteBtn { 172 | background: none; 173 | border: none; 174 | color: #dc3545; 175 | font-size: 18px; 176 | cursor: pointer; 177 | padding: 0 8px; 178 | } 179 | 180 | .deleteBtn:hover { 181 | color: #c82333; 182 | } 183 | 184 | /* Estilos para el overlay de eliminación */ 185 | #divOverlay { 186 | display: none; 187 | position: fixed; 188 | top: 0; 189 | left: 0; 190 | width: 100%; 191 | height: 100%; 192 | background-color: rgba(0, 0, 0, 0.5); 193 | z-index: 1000; 194 | } 195 | 196 | #deleteDialog { 197 | position: absolute; 198 | top: 50%; 199 | left: 50%; 200 | transform: translate(-50%, -50%); 201 | background-color: white; 202 | padding: 20px; 203 | border-radius: 8px; 204 | text-align: center; 205 | } 206 | 207 | #deleteDialog span { 208 | display: block; 209 | margin-bottom: 15px; 210 | font-weight: bold; 211 | } 212 | 213 | .cancelButton, 214 | .actionButton { 215 | padding: 8px 16px; 216 | margin: 0 8px; 217 | border: none; 218 | border-radius: 4px; 219 | cursor: pointer; 220 | } 221 | 222 | .cancelButton { 223 | background-color: #6c757d; 224 | color: white; 225 | } 226 | 227 | .actionButton { 228 | background-color: #dc3545; 229 | color: white; 230 | } 231 | 232 | /* Estilos para la vista previa de imágenes */ 233 | #preview { 234 | position: fixed; 235 | top: 0; 236 | left: 0; 237 | width: 100%; 238 | height: 100%; 239 | background-color: rgba(0, 0, 0, 0.9); 240 | display: none; 241 | justify-content: center; 242 | align-items: center; 243 | z-index: 2000; 244 | cursor: pointer; 245 | } 246 | 247 | #imgPreview { 248 | max-width: 90%; 249 | max-height: 90%; 250 | object-fit: contain; 251 | } 252 | 253 | /* Estilos para la visualización de la distribución */ 254 | .chart-container { 255 | width: 300px; 256 | margin: 20px auto; 257 | padding: 20px; 258 | background-color: #f8f9fa; 259 | border-radius: 8px; 260 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 261 | } 262 | 263 | .chart-legend { 264 | display: flex; 265 | flex-direction: column; 266 | gap: 10px; 267 | } 268 | 269 | .chart-item { 270 | display: flex; 271 | align-items: center; 272 | gap: 10px; 273 | } 274 | 275 | .chart-color { 276 | width: 20px; 277 | height: 20px; 278 | border-radius: 50%; 279 | display: inline-block; 280 | } 281 | 282 | .chart-color.bug { 283 | background-color: #dc3545; 284 | } 285 | 286 | .chart-color.note { 287 | background-color: #28a745; 288 | } 289 | 290 | .chart-color.idea { 291 | background-color: #ffc107; 292 | } 293 | 294 | .chart-color.question { 295 | background-color: #17a2b8; 296 | } 297 | 298 | .chart-label { 299 | flex-grow: 1; 300 | font-weight: 500; 301 | } 302 | 303 | .chart-count { 304 | background-color: #e9ecef; 305 | padding: 2px 8px; 306 | border-radius: 12px; 307 | font-size: 0.9em; 308 | min-width: 30px; 309 | text-align: center; 310 | } 311 | 312 | /* Layout para la información de la sesión y la gráfica */ 313 | .session-info-container { 314 | display: flex; 315 | gap: 20px; 316 | margin-bottom: 30px; 317 | } 318 | 319 | .session-info { 320 | flex: 1; 321 | background-color: #f8f9fa; 322 | padding: 20px; 323 | border-radius: 4px; 324 | } 325 | 326 | #chartContainer { 327 | width: 300px; 328 | background-color: #f8f9fa; 329 | padding: 20px; 330 | border-radius: 4px; 331 | } 332 | 333 | /* Estilos para el filtro */ 334 | .filter-container { 335 | margin-bottom: 20px; 336 | display: flex; 337 | gap: 10px; 338 | align-items: center; 339 | flex-wrap: wrap; 340 | } 341 | 342 | .filter-label { 343 | font-weight: bold; 344 | color: #444; 345 | } 346 | 347 | .filter-buttons { 348 | display: flex; 349 | gap: 5px; 350 | flex-wrap: wrap; 351 | } 352 | 353 | .filter-button { 354 | padding: 5px 10px; 355 | border: 1px solid #ddd; 356 | border-radius: 4px; 357 | background-color: white; 358 | cursor: pointer; 359 | transition: all 0.2s; 360 | } 361 | 362 | .filter-button:hover { 363 | background-color: #f8f9fa; 364 | } 365 | 366 | .filter-button.active { 367 | background-color: #007bff; 368 | color: white; 369 | border-color: #007bff; 370 | } 371 | 372 | .download-button { 373 | display: flex; 374 | align-items: center; 375 | gap: 8px; 376 | padding: 8px 16px; 377 | background-color: #28a745; 378 | color: white; 379 | border: none; 380 | border-radius: 4px; 381 | cursor: pointer; 382 | font-weight: 500; 383 | transition: background-color 0.2s; 384 | margin-left: auto; 385 | } 386 | 387 | .download-button:hover { 388 | background-color: #218838; 389 | } 390 | 391 | .download-icon { 392 | width: 16px; 393 | height: 16px; 394 | filter: brightness(0) invert(1); 395 | } -------------------------------------------------------------------------------- /HTMLReport/preview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exploratory Testing Session Report 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Exploratory Testing Session Report

15 |
16 |
17 |
18 | 19 |
20 |
21 |
22 | Filter by type: 23 |
24 | 25 | 26 | 27 | 28 | 29 |
30 | 34 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
TypeDescriptionURLTimeScreenshotRemove
49 |
50 |
51 |
52 |
53 | Delete this annotation? 54 | 55 | 56 |
57 |
58 |
59 | Preview 60 |
61 |
62 | Hover Preview 63 |
64 | 65 | 66 | -------------------------------------------------------------------------------- /HTMLReport/preview.js: -------------------------------------------------------------------------------- 1 | import { Session } from '../src/Session.js'; 2 | import { Bug, Note, Idea, Question } from '../src/Annotation.js'; 3 | 4 | let currentSession = null; 5 | let annotationToDelete = null; 6 | let currentFilter = 'all'; 7 | 8 | // Función para cargar los datos de la sesión 9 | async function loadData() { 10 | try { 11 | const response = await chrome.runtime.sendMessage({ type: "getSessionData" }); 12 | if (!response || response.annotationsCount === 0) { 13 | document.getElementById('report').innerHTML = '

No session data available

'; 14 | return; 15 | } 16 | 17 | // Obtener la sesión completa 18 | const sessionData = await chrome.runtime.sendMessage({ type: "getFullSession" }); 19 | if (!sessionData) { 20 | throw new Error('Could not get full session data'); 21 | } 22 | 23 | // Reconstruir la sesión 24 | currentSession = new Session(sessionData.startDateTime, sessionData.browserInfo); 25 | 26 | // Reconstruir las anotaciones 27 | sessionData.annotations.forEach(annotation => { 28 | let newAnnotation; 29 | switch (annotation.type) { 30 | case "Bug": 31 | newAnnotation = new Bug(annotation.name, annotation.url, annotation.timestamp, annotation.imageURL); 32 | currentSession.addBug(newAnnotation); 33 | break; 34 | case "Note": 35 | newAnnotation = new Note(annotation.name, annotation.url, annotation.timestamp, annotation.imageURL); 36 | currentSession.addNote(newAnnotation); 37 | break; 38 | case "Idea": 39 | newAnnotation = new Idea(annotation.name, annotation.url, annotation.timestamp, annotation.imageURL); 40 | currentSession.addIdea(newAnnotation); 41 | break; 42 | case "Question": 43 | newAnnotation = new Question(annotation.name, annotation.url, annotation.timestamp, annotation.imageURL); 44 | currentSession.addQuestion(newAnnotation); 45 | break; 46 | } 47 | }); 48 | 49 | // Mostrar la información de la sesión 50 | displaySessionInfo(currentSession); 51 | displayAnnotationsTable(currentSession); 52 | setupDeleteListeners(); 53 | setupFilterListeners(); 54 | } catch (error) { 55 | console.error('Error loading data:', error); 56 | document.getElementById('report').innerHTML = `

Error loading data: ${error.message}

`; 57 | } 58 | } 59 | 60 | function displaySessionInfo(session) { 61 | const sessionInfo = document.getElementById('sessionInfo'); 62 | const browserInfo = session.getBrowserInfo(); 63 | const startDateTime = session.getStartDateTime(); 64 | 65 | sessionInfo.innerHTML = ` 66 |
67 |

Session Information

68 |

Start Date: ${startDateTime.toLocaleString()}

69 |

Browser: ${browserInfo.browser} ${browserInfo.browserVersion}

70 |

Operating System: ${browserInfo.os}

71 |

Cookies: ${browserInfo.cookies ? 'Enabled' : 'Disabled'}

72 |
73 | `; 74 | 75 | // Crear la gráfica circular 76 | createAnnotationsChart(session); 77 | } 78 | 79 | function createAnnotationsChart(session) { 80 | const bugs = session.getBugs().length; 81 | const notes = session.getNotes().length; 82 | const ideas = session.getIdeas().length; 83 | const questions = session.getQuestions().length; 84 | 85 | const ctx = document.getElementById('annotationsChart').getContext('2d'); 86 | new Chart(ctx, { 87 | type: 'pie', 88 | data: { 89 | labels: ['Bugs', 'Notes', 'Ideas', 'Questions'], 90 | datasets: [{ 91 | data: [bugs, notes, ideas, questions], 92 | backgroundColor: [ 93 | '#dc3545', // Rojo para bugs 94 | '#28a745', // Verde para notas 95 | '#ffc107', // Amarillo para ideas 96 | '#17a2b8' // Azul para preguntas 97 | ], 98 | borderWidth: 1 99 | }] 100 | }, 101 | options: { 102 | responsive: true, 103 | plugins: { 104 | legend: { 105 | position: 'bottom' 106 | }, 107 | title: { 108 | display: true, 109 | text: 'Annotations Distribution' 110 | } 111 | } 112 | } 113 | }); 114 | } 115 | 116 | function getAnnotationIcon(type) { 117 | switch (type) { 118 | case "Bug": 119 | return 'Bug'; 120 | case "Note": 121 | return 'Note'; 122 | case "Idea": 123 | return 'Idea'; 124 | case "Question": 125 | return 'Question'; 126 | default: 127 | return type; 128 | } 129 | } 130 | 131 | function displayAnnotationsTable(session) { 132 | const tableBody = document.getElementById('annotationsTableBody'); 133 | const annotations = session.getAnnotations(); 134 | 135 | console.log('Annotations:', annotations); 136 | 137 | tableBody.innerHTML = annotations 138 | .filter(annotation => currentFilter === 'all' || annotation.constructor.name === currentFilter) 139 | .map((annotation, index) => { 140 | console.log(`Annotation ${index}:`, { 141 | type: annotation.constructor.name, 142 | name: annotation.name, 143 | url: annotation.url, 144 | timestamp: annotation.timestamp, 145 | imageURL: annotation.imageURL 146 | }); 147 | 148 | const row = ` 149 | 150 | ${getAnnotationIcon(annotation.constructor.name)} 151 | ${annotation.name} 152 | ${annotation.url || 'N/A'} 153 | ${annotation.timestamp ? new Date(annotation.timestamp).toLocaleString() : 'N/A'} 154 | 155 | ${annotation.imageURL ? 156 | `` 160 | : ''} 161 | 162 | 163 | 164 | 165 | `; 166 | return row; 167 | }).join(''); 168 | 169 | // Añadir listeners para las imágenes 170 | document.querySelectorAll('.previewImage').forEach(img => { 171 | // Click para vista completa 172 | img.addEventListener('click', function () { 173 | showImagePreview(this.dataset.preview); 174 | }); 175 | 176 | // Hover para preview 177 | img.addEventListener('mouseenter', function (e) { 178 | showHoverPreview(this.dataset.preview, e); 179 | }); 180 | 181 | img.addEventListener('mousemove', function (e) { 182 | updateHoverPreviewPosition(e); 183 | }); 184 | 185 | img.addEventListener('mouseleave', function () { 186 | hideHoverPreview(); 187 | }); 188 | }); 189 | } 190 | 191 | function showHoverPreview(src, event) { 192 | const preview = document.getElementById('imageHoverPreview'); 193 | const previewImg = preview.querySelector('img'); 194 | previewImg.src = src; 195 | preview.classList.add('active'); 196 | updateHoverPreviewPosition(event); 197 | } 198 | 199 | function updateHoverPreviewPosition(event) { 200 | const preview = document.getElementById('imageHoverPreview'); 201 | if (!preview.classList.contains('active')) return; 202 | 203 | const offset = 15; // Distancia del cursor al preview 204 | const previewWidth = preview.offsetWidth; 205 | const previewHeight = preview.offsetHeight; 206 | const windowWidth = window.innerWidth; 207 | const windowHeight = window.innerHeight; 208 | 209 | // Calcular posición 210 | let left = event.clientX + offset; 211 | let top = event.clientY + offset; 212 | 213 | // Ajustar si el preview se sale de la ventana 214 | if (left + previewWidth > windowWidth) { 215 | left = event.clientX - previewWidth - offset; 216 | } 217 | if (top + previewHeight > windowHeight) { 218 | top = event.clientY - previewHeight - offset; 219 | } 220 | 221 | preview.style.left = left + 'px'; 222 | preview.style.top = top + 'px'; 223 | } 224 | 225 | function hideHoverPreview() { 226 | const preview = document.getElementById('imageHoverPreview'); 227 | preview.classList.remove('active'); 228 | } 229 | 230 | function setupDeleteListeners() { 231 | // Listener para el botón de eliminar 232 | document.querySelectorAll('.deleteBtn').forEach(btn => { 233 | btn.addEventListener('click', function () { 234 | annotationToDelete = parseInt(this.dataset.index); 235 | document.getElementById('divOverlay').style.display = 'block'; 236 | }); 237 | }); 238 | 239 | // Listener para cancelar eliminación 240 | document.getElementById('cancelDelete').addEventListener('click', function () { 241 | document.getElementById('divOverlay').style.display = 'none'; 242 | annotationToDelete = null; 243 | }); 244 | 245 | // Listener para confirmar eliminación 246 | document.getElementById('deleteYes').addEventListener('click', function () { 247 | if (annotationToDelete !== null) { 248 | chrome.runtime.sendMessage({ 249 | type: "deleteAnnotation", 250 | annotationID: annotationToDelete 251 | }, function (response) { 252 | // Cerrar el diálogo y limpiar la variable independientemente de la respuesta 253 | document.getElementById('divOverlay').style.display = 'none'; 254 | annotationToDelete = null; 255 | 256 | // Si hay una respuesta válida y fue exitosa, recargar la página 257 | if (response && response.status === "ok") { 258 | location.reload(); 259 | } else { 260 | console.error('Error al eliminar la anotación:', response); 261 | // Recargar de todos modos para asegurar que los datos estén sincronizados 262 | location.reload(); 263 | } 264 | }); 265 | } 266 | }); 267 | } 268 | 269 | function showImagePreview(src) { 270 | const preview = document.getElementById('imagePreview'); 271 | const previewImg = preview.querySelector('img'); 272 | previewImg.src = src; 273 | preview.classList.add('active'); 274 | 275 | const closePreview = function () { 276 | preview.classList.remove('active'); 277 | preview.removeEventListener('click', closePreview); 278 | }; 279 | 280 | preview.addEventListener('click', closePreview); 281 | 282 | previewImg.addEventListener('click', function (e) { 283 | e.stopPropagation(); 284 | }); 285 | } 286 | 287 | function setupFilterListeners() { 288 | document.querySelectorAll('.filter-button').forEach(button => { 289 | button.addEventListener('click', function () { 290 | // Actualizar botones 291 | document.querySelectorAll('.filter-button').forEach(btn => btn.classList.remove('active')); 292 | this.classList.add('active'); 293 | 294 | // Actualizar filtro 295 | currentFilter = this.dataset.type; 296 | 297 | // Actualizar tabla 298 | displayAnnotationsTable(currentSession); 299 | }); 300 | }); 301 | 302 | // Añadir listener para el botón de descarga 303 | document.getElementById('downloadReportBtn').addEventListener('click', downloadCompleteReport); 304 | } 305 | 306 | function downloadCompleteReport() { 307 | // Crear una copia del contenido actual 308 | const reportContent = document.getElementById('report').cloneNode(true); 309 | 310 | // Remove chart container if it exists 311 | const chartContainer = reportContent.querySelector('#chartContainer'); 312 | if (chartContainer) { 313 | chartContainer.remove(); 314 | } 315 | 316 | // Eliminar el botón de descarga del reporte 317 | const downloadBtn = reportContent.querySelector('#downloadReportBtn'); 318 | if (downloadBtn) { 319 | downloadBtn.parentElement.remove(); 320 | } 321 | 322 | // Eliminar la columna de eliminación 323 | const table = reportContent.querySelector('table'); 324 | if (table) { 325 | // Eliminar la columna del encabezado 326 | const headerRow = table.querySelector('thead tr'); 327 | if (headerRow) { 328 | const lastHeaderCell = headerRow.lastElementChild; 329 | if (lastHeaderCell) { 330 | lastHeaderCell.remove(); 331 | } 332 | } 333 | 334 | // Eliminar la columna de cada fila 335 | const rows = table.querySelectorAll('tbody tr'); 336 | rows.forEach(row => { 337 | const lastCell = row.lastElementChild; 338 | if (lastCell) { 339 | lastCell.remove(); 340 | } 341 | }); 342 | } 343 | 344 | // Asegurar que los filtros estén presentes 345 | const reportDiv = reportContent.querySelector('#report'); 346 | if (reportDiv) { 347 | // Crear el contenedor de filtros si no existe 348 | let filterContainer = reportDiv.querySelector('.filter-container'); 349 | if (!filterContainer) { 350 | filterContainer = document.createElement('div'); 351 | filterContainer.className = 'filter-container'; 352 | reportDiv.insertBefore(filterContainer, reportDiv.firstChild); 353 | } 354 | 355 | // Añadir los botones de filtro 356 | filterContainer.innerHTML = ` 357 |
358 | 359 | 360 | 361 | 362 | 363 |
364 | `; 365 | } 366 | 367 | // Convertir las imágenes a base64 368 | const images = reportContent.querySelectorAll('.previewImage'); 369 | const imagePromises = Array.from(images).map(img => { 370 | return new Promise((resolve) => { 371 | if (img.src) { 372 | const tempImg = new Image(); 373 | tempImg.crossOrigin = 'Anonymous'; 374 | tempImg.onload = function () { 375 | const canvas = document.createElement('canvas'); 376 | canvas.width = tempImg.width; 377 | canvas.height = tempImg.height; 378 | const ctx = canvas.getContext('2d'); 379 | ctx.drawImage(tempImg, 0, 0); 380 | img.src = canvas.toDataURL('image/png'); 381 | resolve(); 382 | }; 383 | tempImg.onerror = () => resolve(); 384 | tempImg.src = img.src; 385 | } else { 386 | resolve(); 387 | } 388 | }); 389 | }); 390 | 391 | // Esperar a que todas las imágenes se conviertan 392 | Promise.all(imagePromises).then(() => { 393 | // Convertir los SVG a base64 394 | const svgPromises = { 395 | Bug: fetch('../images/bug.svg').then(r => r.text()), 396 | Note: fetch('../images/note.svg').then(r => r.text()), 397 | Idea: fetch('../images/light-bulb.svg').then(r => r.text()), 398 | Question: fetch('../images/question.svg').then(r => r.text()) 399 | }; 400 | 401 | Promise.all(Object.values(svgPromises)).then(svgContents => { 402 | const icons = { 403 | Bug: `data:image/svg+xml;base64,${btoa(svgContents[0])}`, 404 | Note: `data:image/svg+xml;base64,${btoa(svgContents[1])}`, 405 | Idea: `data:image/svg+xml;base64,${btoa(svgContents[2])}`, 406 | Question: `data:image/svg+xml;base64,${btoa(svgContents[3])}` 407 | }; 408 | 409 | // Reemplazar las referencias a los iconos en el HTML 410 | const iconElements = reportContent.querySelectorAll('.annotation-icon'); 411 | iconElements.forEach(icon => { 412 | const type = icon.alt; 413 | if (icons[type]) { 414 | icon.outerHTML = `${type}`; 415 | } 416 | }); 417 | 418 | // Crear el HTML completo 419 | const htmlContent = ` 420 | 421 | 422 | 423 | 424 | Exploratory Testing Session Report 425 | 428 | 429 | 430 | ${reportContent.outerHTML} 431 |
432 | Preview 433 |
434 |
435 | Hover Preview 436 |
437 | 534 | 535 | `; 536 | 537 | // Crear el blob y descargar 538 | const blob = new Blob([htmlContent], { type: 'text/html' }); 539 | const url = URL.createObjectURL(blob); 540 | const a = document.createElement('a'); 541 | a.href = url; 542 | a.download = `ExploratoryTestingReport_${new Date().toISOString().slice(0, 10)}.html`; 543 | document.body.appendChild(a); 544 | a.click(); 545 | document.body.removeChild(a); 546 | URL.revokeObjectURL(url); 547 | }); 548 | }); 549 | } 550 | 551 | function getStyles() { 552 | // Obtener todos los estilos del documento 553 | const styles = Array.from(document.styleSheets) 554 | .map(sheet => { 555 | try { 556 | return Array.from(sheet.cssRules) 557 | .map(rule => rule.cssText) 558 | .join('\n'); 559 | } catch (e) { 560 | // Ignorar errores de CORS 561 | return ''; 562 | } 563 | }) 564 | .join('\n'); 565 | 566 | return styles; 567 | } 568 | 569 | // Cargar los datos cuando el documento esté listo 570 | document.addEventListener('DOMContentLoaded', loadData); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # A Chrome Extension for Exploratory Testing 2 | 3 | A Chrome extension designed for making web exploratory testing easier 4 | 5 | **Features** 6 | 7 | - Report bugs, ideas, notes and questions easily 8 | - Take screenshots during the session. Keep focused 9 | - URL will be tracked automatically 10 | - See session results in a report 11 | - Export and import sessions 12 | - Export session to JSON, CSV or HTML 13 | 14 | 15 | Install from [Chrome Store](https://chrome.google.com/webstore/detail/exploratory-testing-chrom/khigmghadjljgjpamimgjjmpmlbgmekj) 16 | 17 | 18 | **Annotate any thought while you test easily and take screenshots without changing context** 19 | 20 | 21 | 22 | 23 | **View session results in a report** 24 | 25 | 26 | 27 | ## Development and Testing 28 | 29 | This section provides instructions for setting up the project locally for development and running tests. 30 | 31 | ### Project Setup 32 | 33 | 1. **Prerequisites**: Ensure you have [Node.js](https://nodejs.org/) installed (which includes npm). 34 | 2. **Clone the Repository**: 35 | ```bash 36 | git clone https://github.com/your-username/your-repo-name.git 37 | cd your-repo-name 38 | ``` 39 | *(Using a common placeholder format for the repo URL. The user can update this if they wish).* 40 | 3. **Install Dependencies**: 41 | ```bash 42 | npm install 43 | ``` 44 | This will install Jest, Babel, and other necessary development dependencies as defined in `package.json`. 45 | 46 | ### Running Tests 47 | 48 | The project uses [Jest](https://jestjs.io/) for unit testing. 49 | 50 | 1. **Execute Tests**: 51 | ```bash 52 | npm test 53 | ``` 54 | Alternatively, you can run Jest directly: 55 | ```bash 56 | npx jest 57 | ``` 58 | 2. **Test Results**: Most tests should pass. 59 | * **Known Issue**: The test suite for `test/spec/ExportSessionCSV.test.js` is currently non-functional due to a syntax error that occurred during the migration to Jest and could not be resolved with available tools. This specific suite will fail or be skipped. All other test suites should pass. 60 | 61 | --- 62 | _PS: I'm not a web designer, so any help with web design or UX will be appreciated._ 63 | 64 | twitter: @morvader 65 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', {targets: {node: 'current'}}], 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /background.js: -------------------------------------------------------------------------------- 1 | // Importar las clases necesarias 2 | import { Session } from './src/Session.js'; 3 | import { Bug } from './src/Annotation.js'; 4 | import { Note } from './src/Annotation.js'; 5 | import { Idea } from './src/Annotation.js'; 6 | import { Question } from './src/Annotation.js'; 7 | import { ExportSessionCSV } from './src/ExportSessionCSV.js'; 8 | import { JSonSessionService } from './src/JSonSessionService.js'; 9 | import { getSystemInfo } from './src/browserInfo.js'; 10 | 11 | let session = new Session(); 12 | 13 | // Función para guardar la sesión en el storage 14 | async function saveSession() { 15 | try { 16 | await chrome.storage.local.set({ 'session': session }); 17 | } catch (error) { 18 | if (error.name === 'QUOTA_BYTES' || (chrome.runtime.lastError && chrome.runtime.lastError.message && chrome.runtime.lastError.message.includes('QUOTA_BYTES'))) { 19 | console.error('Error saving session due to quota limit:', error); 20 | 21 | // Create a deep copy of the session object 22 | const sessionCopy = JSON.parse(JSON.stringify(session)); 23 | 24 | // Find the oldest annotation with a non-null imageURL 25 | let oldestAnnotationIndex = -1; 26 | for (let i = 0; i < sessionCopy.annotations.length; i++) { 27 | if (sessionCopy.annotations[i].imageURL) { 28 | oldestAnnotationIndex = i; 29 | break; 30 | } 31 | } 32 | 33 | if (oldestAnnotationIndex !== -1) { 34 | // const originalImageURL = sessionCopy.annotations[oldestAnnotationIndex].imageURL; // Optional: for logging 35 | sessionCopy.annotations[oldestAnnotationIndex].imageURL = "IMAGE_REMOVED_DUE_TO_STORAGE_LIMIT"; 36 | 37 | try { 38 | await chrome.storage.local.set({ 'session': sessionCopy }); 39 | // Notify user about successful save after removing screenshot 40 | const notifId = 'sessionSavedAfterQuota-' + Date.now(); 41 | chrome.notifications.create(notifId, { 42 | type: 'basic', 43 | iconUrl: 'icons/iconbig.png', 44 | title: 'Session Saved with Adjustment', 45 | message: 'The oldest screenshot was removed to save the session due to storage limits.' 46 | }); 47 | setTimeout(() => { chrome.notifications.clear(notifId); }, 7000); 48 | // Update the main session object to reflect the change if the save was successful. 49 | session.annotations[oldestAnnotationIndex].imageURL = "IMAGE_REMOVED_DUE_TO_STORAGE_LIMIT"; 50 | 51 | } catch (secondError) { 52 | console.error('Error saving session even after removing screenshot:', secondError); 53 | // Notify user about failed save even after removing screenshot 54 | const notifId = 'sessionSaveFailedAfterQuota-' + Date.now(); 55 | chrome.notifications.create(notifId, { 56 | type: 'basic', 57 | iconUrl: 'icons/iconbig.png', 58 | title: 'Session Save Failed', 59 | message: 'Failed to save session. Insufficient storage even after removing the oldest screenshot.' 60 | }); 61 | setTimeout(() => { chrome.notifications.clear(notifId); }, 7000); 62 | } 63 | } else { 64 | // No annotation with imageURL found 65 | console.error('Failed to save session. No screenshots to remove for quota.'); 66 | const notifId = 'sessionSaveFailedNoScreenshot-' + Date.now(); 67 | chrome.notifications.create(notifId, { 68 | type: 'basic', 69 | iconUrl: 'icons/iconbig.png', 70 | title: 'Session Save Failed', 71 | message: 'Failed to save session. Insufficient storage and no screenshots to remove.' 72 | }); 73 | setTimeout(() => { chrome.notifications.clear(notifId); }, 7000); 74 | } 75 | } else { 76 | // Not a quota error, re-throw or handle as appropriate 77 | console.error('Error saving session:', error); 78 | throw error; 79 | } 80 | } 81 | } 82 | 83 | // Función para cargar la sesión desde el storage 84 | async function loadSession() { 85 | const data = await chrome.storage.local.get('session'); 86 | if (data.session) { 87 | // Reconstruir el objeto Session con sus métodos 88 | const loadedSession = data.session; 89 | session = new Session(loadedSession.startDateTime, loadedSession.browserInfo); 90 | 91 | // Reconstruir las anotaciones 92 | loadedSession.annotations.forEach(annotation => { 93 | let newAnnotation; 94 | switch (annotation.type) { 95 | case "Bug": 96 | newAnnotation = new Bug(annotation.name, annotation.url, annotation.timestamp, annotation.imageURL); 97 | session.addBug(newAnnotation); 98 | break; 99 | case "Note": 100 | newAnnotation = new Note(annotation.name, annotation.url, annotation.timestamp, annotation.imageURL); 101 | session.addNote(newAnnotation); 102 | break; 103 | case "Idea": 104 | newAnnotation = new Idea(annotation.name, annotation.url, annotation.timestamp, annotation.imageURL); 105 | session.addIdea(newAnnotation); 106 | break; 107 | case "Question": 108 | newAnnotation = new Question(annotation.name, annotation.url, annotation.timestamp, annotation.imageURL); 109 | session.addQuestion(newAnnotation); 110 | break; 111 | } 112 | }); 113 | } 114 | } 115 | 116 | // Cargar la sesión al iniciar 117 | loadSession(); 118 | 119 | // Helper function for notifications of processing errors (before addAnnotation is called) 120 | function notifyProcessingError(annotationType, descriptionName, errorMessage = "") { 121 | const typeStr = annotationType || "Annotation"; 122 | const nameStr = descriptionName || ""; 123 | const notifId = 'annotationProcessingError-' + Date.now(); 124 | chrome.notifications.create(notifId, { 125 | type: 'basic', 126 | iconUrl: 'icons/iconbig.png', 127 | title: `${typeStr} Processing Failed`, 128 | message: `Could not process ${typeStr.toLowerCase()} "${nameStr}" for screenshot. Error: ${errorMessage}` 129 | }); 130 | setTimeout(() => { chrome.notifications.clear(notifId); }, 7000); 131 | } 132 | 133 | 134 | // Escuchar mensajes del popup 135 | chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { 136 | // Keep 'return true' if any path in this listener might call sendResponse asynchronously. 137 | // For "csToBgCropData", we are not sending a response back to content script currently. 138 | // For other existing cases, they do use sendResponse. 139 | let isAsync = false; 140 | 141 | switch (request.type) { 142 | case "addBug": 143 | console.log("Background: Received message", request.type, ". Name:", request.name, ". imageURL (first 100 chars):", request.imageURL ? request.imageURL.substring(0, 100) : "null"); 144 | addAnnotation("Bug", request.name, request.imageURL) 145 | .then(() => sendResponse({ status: "ok" })) 146 | .catch(error => sendResponse({ status: "error", error: error.message })); 147 | isAsync = true; 148 | break; 149 | case "addIdea": 150 | console.log("Background: Received message", request.type, ". Name:", request.name, ". imageURL (first 100 chars):", request.imageURL ? request.imageURL.substring(0, 100) : "null"); 151 | addAnnotation("Idea", request.name, request.imageURL) 152 | .then(() => sendResponse({ status: "ok" })) 153 | .catch(error => sendResponse({ status: "error", error: error.message })); 154 | isAsync = true; 155 | break; 156 | case "addNote": 157 | console.log("Background: Received message", request.type, ". Name:", request.name, ". imageURL (first 100 chars):", request.imageURL ? request.imageURL.substring(0, 100) : "null"); 158 | addAnnotation("Note", request.name, request.imageURL) 159 | .then(() => sendResponse({ status: "ok" })) 160 | .catch(error => sendResponse({ status: "error", error: error.message })); 161 | isAsync = true; 162 | break; 163 | case "addQuestion": 164 | console.log("Background: Received message", request.type, ". Name:", request.name, ". imageURL (first 100 chars):", request.imageURL ? request.imageURL.substring(0, 100) : "null"); 165 | addAnnotation("Question", request.name, request.imageURL) 166 | .then(() => sendResponse({ status: "ok" })) 167 | .catch(error => sendResponse({ status: "error", error: error.message })); 168 | isAsync = true; 169 | break; 170 | case "csToBgCropData": 171 | console.log("Background: Received csToBgCropData", request); 172 | handleProcessCropRequest(request) 173 | .then(() => { 174 | console.log("Background: Crop request processed successfully"); 175 | }) 176 | .catch((error) => { 177 | console.error("Background: Failed to process crop request:", error); 178 | }); 179 | break; 180 | case "updateAnnotationName": 181 | var AnnotationID = request.annotationID; 182 | var newName = request.newName; 183 | var annotations = session.getAnnotations(); 184 | var annotation = annotations[AnnotationID]; 185 | annotation.setName(newName); 186 | saveSession().then(() => sendResponse({ status: "ok" })); 187 | break; 188 | case "deleteAnnotation": 189 | session.deleteAnnotation(request.annotationID); 190 | saveSession().then(() => sendResponse({ status: "ok" })); 191 | break; 192 | case "exportSessionCSV": 193 | if (!exportSessionCSV()) { 194 | sendResponse({ status: "nothing to export" }); 195 | } else { 196 | sendResponse({ status: "ok" }); 197 | } 198 | break; 199 | case "exportSessionJSon": 200 | if (!exportSessionJSon()) { 201 | sendResponse({ status: "nothing to export" }); 202 | } else { 203 | sendResponse({ status: "ok" }); 204 | } 205 | break; 206 | case "importSessionJSon": 207 | var fileData = request.jSonSession; 208 | if (!importSessionJSon(fileData)) { 209 | sendResponse({ status: "nothing to import" }); 210 | } else { 211 | sendResponse({ status: "ok" }); 212 | } 213 | break; 214 | case "clearSession": 215 | clearSession().then(() => sendResponse({ status: "ok" })); 216 | break; 217 | case "getSessionData": 218 | sendResponse({ 219 | bugs: session.getBugs().length, 220 | notes: session.getNotes().length, 221 | ideas: session.getIdeas().length, 222 | questions: session.getQuestions().length, 223 | annotationsCount: session.getAnnotations().length 224 | }); 225 | break; 226 | case "getFullSession": 227 | if (!session) { 228 | sendResponse(null); 229 | return true; 230 | } 231 | sendResponse({ 232 | startDateTime: session.StartDateTime, 233 | browserInfo: { 234 | browser: session.BrowserInfo.browser || "Chrome", 235 | browserVersion: session.BrowserInfo.browserVersion || chrome.runtime.getManifest().version, 236 | os: session.BrowserInfo.os || navigator.platform, 237 | osVersion: session.BrowserInfo.osVersion || navigator.userAgent, 238 | cookies: session.BrowserInfo.cookies || navigator.cookieEnabled, 239 | flashVersion: session.BrowserInfo.flashVersion || "N/A" 240 | }, 241 | annotations: session.annotations.map(annotation => ({ 242 | type: annotation.constructor.name, 243 | name: annotation.name, 244 | url: annotation.url, 245 | timestamp: annotation.timestamp, 246 | imageURL: annotation.imageURL 247 | })) 248 | }); 249 | break; 250 | } 251 | return isAsync; // Return true only if sendResponse is used asynchronously in any of the handled cases. 252 | }); 253 | 254 | 255 | // Función para manejar la solicitud de captura de pantalla 256 | async function handleProcessCropRequest(request) { 257 | try { 258 | console.log("Background: Processing crop request for tab", request.tabId, request); 259 | 260 | // Obtener la pestaña activa 261 | const tabs = await chrome.tabs.query({ active: true, currentWindow: true }); 262 | if (!tabs || tabs.length === 0) { 263 | throw new Error("No active tab found"); 264 | } 265 | const activeTab = tabs[0]; 266 | 267 | // Capturar la pantalla 268 | const dataUrl = await chrome.tabs.captureVisibleTab(null, { format: "png" }); 269 | if (!dataUrl) { 270 | throw new Error("Failed to capture screenshot"); 271 | } 272 | 273 | // Convertir dataUrl a Blob 274 | const response = await fetch(dataUrl); 275 | const blob = await response.blob(); 276 | 277 | // Crear un bitmap de la imagen 278 | const bitmap = await createImageBitmap(blob); 279 | 280 | // Intentar inferir el DPR comparando el tamaño de la bitmap con las coordenadas CSS recibidas. 281 | // Esto asume que las coordenadas request.coordinates representan el área de recorte en píxeles CSS 282 | // relativo al tamaño del viewport en píxeles CSS. 283 | // NOTA: La forma correcta es ajustar en el content script. 284 | let inferredDpr = 1; 285 | if (request.viewportWidth && request.viewportHeight && bitmap.width && bitmap.height) { 286 | // Asumiendo que la bitmap.width / viewportWidth en CSS es aproximadamente el DPR 287 | // Esto puede no ser exacto si la captura no cubre exactamente el viewport o hay zoom. 288 | inferredDpr = bitmap.width / request.viewportWidth; 289 | console.log("Background: Inferred DPR based on bitmap size and viewport width:", inferredDpr); 290 | } else { 291 | console.log("Background: Could not infer DPR. Using assumed DPR of 1."); 292 | } 293 | 294 | // Crear un canvas fuera de pantalla con las dimensiones del recorte en píxeles de dispositivo 295 | const canvas = new OffscreenCanvas( 296 | request.coordinates.width * inferredDpr, 297 | request.coordinates.height * inferredDpr 298 | ); 299 | const ctx = canvas.getContext('2d'); 300 | 301 | // Dibujar la porción seleccionada 302 | ctx.drawImage( 303 | bitmap, 304 | request.coordinates.x * inferredDpr, // Ajustar coordenada X origen 305 | request.coordinates.y * inferredDpr, // Ajustar coordenada Y origen 306 | request.coordinates.width * inferredDpr, // Ajustar ancho origen 307 | request.coordinates.height * inferredDpr, // Ajustar alto origen 308 | 0, 309 | 0, 310 | request.coordinates.width * inferredDpr, // Dibujar en el canvas con el tamaño ajustado 311 | request.coordinates.height * inferredDpr // Dibujar en el canvas con el tamaño ajustado 312 | ); 313 | 314 | // Convertir el canvas a blob 315 | const croppedBlob = await canvas.convertToBlob({ type: 'image/png' }); 316 | 317 | // Convertir blob a dataUrl 318 | const croppedDataUrl = await new Promise((resolve) => { 319 | const reader = new FileReader(); 320 | reader.onloadend = () => resolve(reader.result); 321 | reader.readAsDataURL(croppedBlob); 322 | }); 323 | 324 | // Crear la anotación 325 | await addAnnotation( 326 | request.annotationType.charAt(0).toUpperCase() + request.annotationType.slice(1), 327 | request.description, 328 | croppedDataUrl 329 | ); 330 | 331 | console.log("Background: Successfully processed crop request"); 332 | } catch (error) { 333 | console.error("Background: Error in handleProcessCropRequest:", error); 334 | throw error; 335 | } 336 | } 337 | 338 | 339 | async function addAnnotation(type, name, imageURL) { 340 | console.log("Background: addAnnotation called. Type:", type, ". Name:", name, ". Image URL (first 100 chars):", imageURL ? imageURL.substring(0, 100) : "No image"); 341 | if (session.getAnnotations().length == 0) { 342 | await startSession(); 343 | } 344 | 345 | return new Promise((resolve, reject) => { 346 | chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) { 347 | try { 348 | const currentUrl = tabs[0] ? tabs[0].url : "N/A"; // Handle missing tab 349 | const now = new Date().getTime(); 350 | 351 | let newAnnotation; 352 | let annotationSimpleType = ""; // For user-friendly notification 353 | 354 | switch (type) { 355 | case "Bug": 356 | newAnnotation = new Bug(name, currentUrl, now, imageURL); 357 | session.addBug(newAnnotation); 358 | annotationSimpleType = "Bug"; 359 | break; 360 | case "Note": 361 | newAnnotation = new Note(name, currentUrl, now, imageURL); 362 | session.addNote(newAnnotation); 363 | annotationSimpleType = "Note"; 364 | break; 365 | case "Idea": 366 | newAnnotation = new Idea(name, currentUrl, now, imageURL); 367 | session.addIdea(newAnnotation); 368 | annotationSimpleType = "Idea"; 369 | break; 370 | case "Question": 371 | newAnnotation = new Question(name, currentUrl, now, imageURL); 372 | session.addQuestion(newAnnotation); 373 | annotationSimpleType = "Question"; 374 | break; 375 | default: // Should not happen 376 | return reject(new Error("Unknown annotation type")); 377 | } 378 | 379 | console.log("Background: Attempting to save session for annotation Type:", type, "Name:", name); 380 | saveSession().then(() => { 381 | // --- Create Notification --- 382 | const notifId = 'annotationSaved-' + Date.now(); 383 | const notifOptions = { 384 | type: 'basic', 385 | iconUrl: 'icons/iconbig.png', // Ensure this icon path is correct 386 | title: `${annotationSimpleType} Saved!`, 387 | message: `Your ${annotationSimpleType.toLowerCase()} "${name}" has been successfully saved.` 388 | }; 389 | chrome.notifications.create(notifId, notifOptions); 390 | // Optional: Clear notification after a few seconds 391 | setTimeout(() => { 392 | chrome.notifications.clear(notifId); 393 | }, 5000); // Clear after 5 seconds 394 | // --- End Notification --- 395 | 396 | resolve(); // Resolve the main promise 397 | }).catch(error => { 398 | console.error("Background: Error during saveSession for", type, name, ":", error); 399 | // Optionally, show an error notification here too 400 | const errorNotifId = 'annotationError-' + Date.now(); 401 | chrome.notifications.create(errorNotifId, { 402 | type: 'basic', 403 | iconUrl: 'icons/iconbig.png', 404 | title: `${annotationSimpleType || type} Save Failed`, 405 | message: `Could not save ${annotationSimpleType.toLowerCase() || type.toLowerCase()} "${name}". Error: ${error.message}` 406 | }); 407 | setTimeout(() => { 408 | chrome.notifications.clear(errorNotifId); 409 | }, 7000); // Keep error notifications slightly longer 410 | 411 | reject(error); 412 | }); 413 | 414 | } catch (error) { // Catch synchronous errors in the promise executor 415 | console.error("Background: Error in addAnnotation sync part:", error); 416 | // Send a notification for this synchronous error as well 417 | const syncErrorNotifId = 'annotationSyncError-' + Date.now(); 418 | chrome.notifications.create(syncErrorNotifId, { 419 | type: 'basic', 420 | iconUrl: 'icons/iconbig.png', 421 | title: `${type || 'Annotation'} Setup Failed`, 422 | message: `Failed to initiate saving for "${name}". Error: ${error.message}` 423 | }); 424 | setTimeout(() => { 425 | chrome.notifications.clear(syncErrorNotifId); 426 | }, 7000); 427 | reject(error); 428 | } 429 | }); 430 | }); 431 | } 432 | 433 | async function startSession() { 434 | var systemInfo = getSystemInfo(); 435 | session = new Session(Date.now(), systemInfo); 436 | await saveSession(); 437 | } 438 | 439 | async function clearSession() { 440 | session.clearAnnotations(); 441 | await saveSession(); 442 | } 443 | 444 | function exportSessionCSV() { 445 | if (session.getAnnotations().length == 0) return false; 446 | 447 | var exportService = new ExportSessionCSV(session); 448 | var csvData = exportService.getCSVData(); 449 | 450 | var browserInfo = session.getBrowserInfo(); 451 | var browserInfoString = browserInfo.browser + "_" + browserInfo.browserVersion; 452 | 453 | // Formatear la fecha correctamente 454 | const date = new Date(session.getStartDateTime()); 455 | const startDateTime = date.getFullYear() + 456 | ('0' + (date.getMonth() + 1)).slice(-2) + 457 | ('0' + date.getDate()).slice(-2) + '_' + 458 | ('0' + date.getHours()).slice(-2) + 459 | ('0' + date.getMinutes()).slice(-2); 460 | 461 | var fileName = "ExploratorySession_" + browserInfoString + "_" + startDateTime + ".csv"; 462 | 463 | // Crear data URL 464 | const dataUrl = 'data:text/csv;charset=utf-8;base64,' + btoa(csvData); 465 | 466 | chrome.downloads.download({ 467 | url: dataUrl, 468 | filename: fileName, 469 | saveAs: true 470 | }); 471 | 472 | return true; 473 | } 474 | 475 | function exportSessionJSon() { 476 | if (session.getAnnotations().length == 0) return false; 477 | 478 | var exportJSonService = new JSonSessionService(); 479 | var jsonData = exportJSonService.getJSon(session); 480 | 481 | var browserInfo = session.getBrowserInfo(); 482 | var browserInfoString = browserInfo.browser + "_" + browserInfo.browserVersion; 483 | 484 | // Formatear la fecha correctamente 485 | const date = new Date(session.getStartDateTime()); 486 | const startDateTime = date.getFullYear() + 487 | ('0' + (date.getMonth() + 1)).slice(-2) + 488 | ('0' + date.getDate()).slice(-2) + '_' + 489 | ('0' + date.getHours()).slice(-2) + 490 | ('0' + date.getMinutes()).slice(-2); 491 | 492 | var fileName = "ExploratorySession_" + browserInfoString + "_" + startDateTime + ".json"; 493 | 494 | // Crear data URL 495 | const dataUrl = 'data:application/json;base64,' + btoa(jsonData); 496 | 497 | chrome.downloads.download({ 498 | url: dataUrl, 499 | filename: fileName, 500 | saveAs: true 501 | }); 502 | 503 | return true; 504 | } 505 | 506 | function importSessionJSon(JSonSessionData) { 507 | debugger; 508 | var exportJSonService = new JSonSessionService(); 509 | var importedSession = exportJSonService.getSession(JSonSessionData); 510 | 511 | if (importedSession == null) 512 | return false; 513 | 514 | clearSession(); 515 | session = importedSession; 516 | 517 | return true; 518 | } -------------------------------------------------------------------------------- /css/popUp.css: -------------------------------------------------------------------------------- 1 | body { 2 | min-width: 300px; 3 | max-width: 400px; 4 | } 5 | 6 | .form-control-sm { 7 | width: 100%; 8 | } 9 | 10 | .screenshot { 11 | background-image: url("../images/device-camera.svg"); 12 | background-repeat: no-repeat; 13 | background-size: 75%; 14 | background-position: 4px 3px; 15 | min-width: 30px; 16 | } 17 | 18 | .crop-screenshot { 19 | background-image: url("../images/crop.png"); 20 | background-repeat: no-repeat; 21 | background-size: 75%; 22 | background-position: 4px 3px; 23 | min-width: 30px; 24 | } 25 | 26 | .add { 27 | background-image: url("../images/diff-added.svg"); 28 | background-repeat: no-repeat; 29 | background-size: 75%; 30 | background-position: 4px 3px; 31 | min-width: 30px; 32 | } 33 | 34 | .card-header { 35 | padding: 4px 0 0 7px; 36 | } 37 | 38 | .card, 39 | .card-body, 40 | .card>.card>.card-header, 41 | .card-body>.card-footer { 42 | padding: 2px 3px; 43 | } 44 | 45 | .cancel { 46 | float: right; 47 | } 48 | 49 | .list-group-item>.card>.card-header, 50 | .list-group-item>.card>.card-footer, 51 | .list-group-item>.card>.card-body { 52 | padding: 2px; 53 | } 54 | 55 | .reportAnnotation { 56 | display: none; 57 | margin-top: 2px; 58 | } 59 | 60 | #resetConfirmation { 61 | margin-top: 20px; 62 | } 63 | 64 | .btn-secondary { 65 | background-color: #f7f7f7; 66 | border-color: #f7f7f7; 67 | 68 | } 69 | 70 | #resetBtn { 71 | 72 | max-height: 30px; 73 | margin-right: 100px; 74 | 75 | 76 | } 77 | 78 | button input.file-input { 79 | display: none; 80 | /*position: absolute; 81 | top: 0; 82 | right: 0; 83 | margin: 0; 84 | padding: 0; 85 | font-size: 20px; 86 | cursor: pointer; 87 | opacity: 0; 88 | filter: alpha(opacity=0);*/ 89 | } 90 | 91 | #exportCSVBtn { 92 | background-image: url("../images/003-csv.svg"); 93 | background-repeat: no-repeat; 94 | background-size: 100%; 95 | /*background-position: 4px 3px; */ 96 | min-width: 30px; 97 | min-height: 30px; 98 | } 99 | 100 | #exportJsonBtn { 101 | background-image: url("../images/002-download.svg"); 102 | background-repeat: no-repeat; 103 | background-size: 100%; 104 | /*background-position: 4px 3px; */ 105 | min-width: 30px; 106 | min-height: 30px; 107 | margin-left: 5px; 108 | } 109 | 110 | #importJsonBtn { 111 | background-image: url("../images/004-up-arrow.svg"); 112 | background-repeat: no-repeat; 113 | background-size: 100%; 114 | /*background-position: 4px 3px; */ 115 | min-width: 30px; 116 | min-height: 30px; 117 | margin-left: 5px; 118 | } 119 | 120 | #previewBtn { 121 | background-image: url("../images/001-graphic.svg"); 122 | background-repeat: no-repeat; 123 | background-size: 100%; 124 | /*background-position: 4px 3px; */ 125 | min-width: 30px; 126 | min-height: 30px; 127 | margin-left: 5px; 128 | } -------------------------------------------------------------------------------- /genetareZip.ps1: -------------------------------------------------------------------------------- 1 | # target path 2 | $path = "." 3 | # construct archive path 4 | $DateTime = (Get-Date -Format "yyyyMMddHHmmss") 5 | $destination = Join-Path $path ".\ETExtension-$DateTime.zip" 6 | # exclusion rules. Can use wild cards (*) 7 | $exclude = @("_*.config","ARCHIVE","*.zip","test","screenshots", ".gitignore",".\.git","*.ps1","node_modules") 8 | # get files to compress using exclusion filer 9 | $files = Get-ChildItem -Path $path -Exclude $exclude 10 | # compress 11 | Compress-Archive -Path $files -DestinationPath $destination -CompressionLevel Optimal -------------------------------------------------------------------------------- /icons/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/icons/icon.png -------------------------------------------------------------------------------- /icons/iconbig.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/icons/iconbig.png -------------------------------------------------------------------------------- /icons/iconbig_.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/icons/iconbig_.png -------------------------------------------------------------------------------- /icons/iconmed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/icons/iconmed.png -------------------------------------------------------------------------------- /icons/iconsmall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/icons/iconsmall.png -------------------------------------------------------------------------------- /images/001-graphic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 10 | 11 | 12 | 13 | 14 | 16 | 18 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /images/002-download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /images/003-csv.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 10 | 11 | 21 | 34 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /images/004-up-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /images/bug.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/crop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/images/crop.png -------------------------------------------------------------------------------- /images/device-camera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/diff-added.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/light-bulb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/note.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/question.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/trashcan.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // Automatically clear mock calls and instances between every test 3 | clearMocks: true, 4 | 5 | // The directory where Jest should output its coverage files 6 | coverageDirectory: 'coverage', 7 | 8 | // An array of glob patterns indicating a set of files for which coverage information should be collected 9 | collectCoverageFrom: ['src/**/*.js'], 10 | 11 | // The test environment that will be used for testing 12 | testEnvironment: 'node', 13 | 14 | // A list of paths to modules that run some code to configure or set up the testing framework before each test 15 | setupFilesAfterEnv: ['./jest.setup.js'], 16 | 17 | // The glob patterns Jest uses to detect test files 18 | testMatch: [ 19 | '**/test/spec/**/*.test.js', // Updated to match new .test.js extension 20 | ], 21 | 22 | // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module 23 | moduleNameMapper: { 24 | // If you have module aliases in your project, configure them here 25 | // Example: '^@/(.*)$': '/src/$1' 26 | }, 27 | 28 | // Indicates whether each individual test should be reported during the run 29 | verbose: true, 30 | 31 | // Transform files with babel-jest if using ES6+ features not supported by Node version 32 | // Jest often handles basic ES6 module syntax (import/export) out of the box. 33 | // If advanced ES6+ features or JSX are used, Babel might be needed. 34 | // For now, we assume Jest's default transformation will work for the current codebase. 35 | transform: { 36 | '^.+\\.js$': 'babel-jest', 37 | }, 38 | }; 39 | -------------------------------------------------------------------------------- /jest.setup.js: -------------------------------------------------------------------------------- 1 | // Mock chrome extension APIs 2 | global.chrome = { 3 | runtime: { 4 | getManifest: () => ({ version: '1.0.0' }), // Basic mock 5 | // Add other chrome.runtime APIs if needed by tests 6 | }, 7 | // Mock other chrome.* APIs as necessary 8 | storage: { 9 | local: { 10 | get: jest.fn((keys, callback) => callback({})), 11 | set: jest.fn((items, callback) => callback()), 12 | // Add other chrome.storage.local methods if used 13 | }, 14 | // Add chrome.storage.sync etc. if used 15 | }, 16 | tabs: { 17 | query: jest.fn((queryInfo, callback) => callback([{ id: 1, url: 'http://example.com' }])), 18 | // Add other chrome.tabs APIs if needed 19 | } 20 | // Add more chrome API mocks as identified during testing 21 | }; 22 | 23 | // Mock navigator properties used in browserInfo.js 24 | global.navigator = { 25 | ...global.navigator, // Preserve existing navigator properties if any 26 | platform: 'TestPlatform', 27 | userAgent: 'TestUserAgent/1.0', 28 | cookieEnabled: true, 29 | }; 30 | 31 | 32 | // Attempt to load the custom date.js library. 33 | // IMPORTANT: This path is relative to the project root. 34 | // Ensure 'lib/date.js' exists and this path is correct. 35 | // If 'lib/date.js' modifies Date.prototype, it should apply globally once imported. 36 | try { 37 | require('./lib/date.js'); // This assumes date.js is CJS compatible or Jest handles its format. 38 | // If it's an ES module and causes issues, this might need adjustment 39 | // or the date logic refactored. 40 | } catch (e) { 41 | console.error("Failed to load lib/date.js in jest.setup.js:", e); 42 | // Depending on test failures, we might need to reconsider how to handle this. 43 | } 44 | -------------------------------------------------------------------------------- /js/content_script.js: -------------------------------------------------------------------------------- 1 | // js/content_script.js 2 | 3 | // Check if the main listener and elements are already set up 4 | if (typeof window.exploratoryTestingCropperInitialized === 'undefined') { 5 | window.exploratoryTestingCropperInitialized = true; 6 | 7 | let selectionBox = null; // Will hold the div element 8 | let isDrawing = false; // True when mouse is down and dragging 9 | let startX, startY; // Initial mouse coordinates on mousedown 10 | let selectionInstructionNotification = null; // For the notification message 11 | 12 | // Store data received from popup 13 | let currentAnnotationType = null; 14 | let currentDescription = null; 15 | 16 | // This listener is added once per page load/script injection context 17 | chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { 18 | if (request.type === "startSelection") { 19 | console.log("Content script: 'startSelection' message received with type:", request.annotationType, "and description:", request.description ? request.description.substring(0, 50) + "..." : "N/A"); 20 | 21 | // Store annotation details 22 | currentAnnotationType = request.annotationType; 23 | currentDescription = request.description; 24 | 25 | isDrawing = false; 26 | if (selectionBox) { // Hide if it exists from a previous attempt 27 | selectionBox.style.display = 'none'; 28 | } 29 | initSelection(); // Prepare for a new selection 30 | sendResponse({ status: "selectionStarted" }); // Response back to popup.js 31 | } 32 | // For safety with multiple potential message types, keeping 'return true;' 33 | // as other handlers (if added in the future) might use sendResponse asynchronously. 34 | return true; 35 | }); 36 | 37 | function createSelectionBoxElement() { 38 | // Check if the element already exists 39 | let existingBox = document.getElementById('exploratoryTestingSelectionBox'); 40 | if (!existingBox) { 41 | let box = document.createElement('div'); 42 | box.id = 'exploratoryTestingSelectionBox'; 43 | box.style.position = 'fixed'; 44 | box.style.backgroundColor = 'rgba(0, 100, 255, 0.3)'; 45 | box.style.border = '1px dashed #0064ff'; 46 | box.style.zIndex = '2147483647'; // Max z-index 47 | box.style.cursor = 'crosshair'; 48 | box.style.pointerEvents = 'none'; 49 | box.style.display = 'none'; 50 | document.body.appendChild(box); 51 | return box; 52 | } 53 | return existingBox; 54 | } 55 | 56 | function showSelectionNotification(message) { 57 | removeSelectionNotification(); 58 | selectionInstructionNotification = document.createElement('div'); 59 | selectionInstructionNotification.id = 'exploratoryTestingSelectionNotification'; 60 | selectionInstructionNotification.textContent = message; 61 | selectionInstructionNotification.style.position = 'fixed'; 62 | selectionInstructionNotification.style.top = '20px'; 63 | selectionInstructionNotification.style.left = '50%'; 64 | selectionInstructionNotification.style.transform = 'translateX(-50%)'; 65 | selectionInstructionNotification.style.padding = '10px 20px'; 66 | selectionInstructionNotification.style.backgroundColor = 'rgba(0,0,0,0.75)'; 67 | selectionInstructionNotification.style.color = 'white'; 68 | selectionInstructionNotification.style.fontSize = '16px'; 69 | selectionInstructionNotification.style.borderRadius = '5px'; 70 | selectionInstructionNotification.style.zIndex = '2147483646'; 71 | selectionInstructionNotification.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)'; 72 | document.body.appendChild(selectionInstructionNotification); 73 | } 74 | 75 | function removeSelectionNotification() { 76 | if (selectionInstructionNotification && selectionInstructionNotification.parentNode) { 77 | selectionInstructionNotification.parentNode.removeChild(selectionInstructionNotification); 78 | selectionInstructionNotification = null; 79 | } 80 | } 81 | 82 | function initSelection() { 83 | if (!selectionBox) { 84 | console.error("Selection box element not found or created!"); 85 | return; 86 | } 87 | selectionBox.style.left = '0px'; 88 | selectionBox.style.top = '0px'; 89 | selectionBox.style.width = '0px'; 90 | selectionBox.style.height = '0px'; 91 | selectionBox.style.display = 'none'; 92 | 93 | cleanUpAllSelectionListeners(); 94 | removeSelectionNotification(); 95 | showSelectionNotification("Click and drag to select an area. Press Esc to cancel."); 96 | 97 | document.addEventListener('mousedown', handleMouseDown); 98 | document.addEventListener('keydown', handleKeyDown); 99 | console.log("Content script: Initialized for new selection. Mousedown and keydown listeners added. Notification shown."); 100 | } 101 | 102 | function handleMouseDown(event) { 103 | event.preventDefault(); 104 | event.stopPropagation(); 105 | 106 | isDrawing = true; 107 | startX = event.clientX; 108 | startY = event.clientY; 109 | 110 | selectionBox.style.left = startX + 'px'; 111 | selectionBox.style.top = startY + 'px'; 112 | selectionBox.style.width = '0px'; 113 | selectionBox.style.height = '0px'; 114 | selectionBox.style.display = 'block'; 115 | 116 | document.addEventListener('mousemove', handleMouseMove); 117 | document.addEventListener('mouseup', handleMouseUp); 118 | console.log("Content script: Mouse down, drawing started."); 119 | } 120 | 121 | function handleMouseMove(event) { 122 | if (!isDrawing) return; 123 | event.preventDefault(); 124 | event.stopPropagation(); 125 | 126 | let currentX = event.clientX; 127 | let currentY = event.clientY; 128 | 129 | let newX = Math.min(startX, currentX); 130 | let newY = Math.min(startY, currentY); 131 | let width = Math.abs(currentX - startX); 132 | let height = Math.abs(currentY - startY); 133 | 134 | selectionBox.style.left = newX + 'px'; 135 | selectionBox.style.top = newY + 'px'; 136 | selectionBox.style.width = width + 'px'; 137 | selectionBox.style.height = height + 'px'; 138 | } 139 | 140 | function handleMouseUp(event) { 141 | if (!isDrawing) return; 142 | isDrawing = false; 143 | event.preventDefault(); 144 | event.stopPropagation(); 145 | 146 | console.log("Content script: Mouse up, drawing ended."); 147 | cleanUpInProgressSelectionListeners(); 148 | 149 | let finalX = parseInt(selectionBox.style.left, 10); 150 | let finalY = parseInt(selectionBox.style.top, 10); 151 | let finalWidth = parseInt(selectionBox.style.width, 10); 152 | let finalHeight = parseInt(selectionBox.style.height, 10); 153 | 154 | if (selectionBox) selectionBox.style.display = 'none'; 155 | removeSelectionNotification(); 156 | 157 | if (finalWidth > 0 && finalHeight > 0) { 158 | // Obtener el Device Pixel Ratio 159 | const dpr = window.devicePixelRatio || 1; 160 | 161 | // Ajustar las coordenadas por el DPR 162 | const croppedCoordinates = { 163 | x: finalX * dpr, 164 | y: finalY * dpr, 165 | width: finalWidth * dpr, 166 | height: finalHeight * dpr 167 | }; 168 | 169 | const messageToBackground = { 170 | type: "csToBgCropData", 171 | coordinates: croppedCoordinates, // Usar las coordenadas ajustadas 172 | annotationType: currentAnnotationType, 173 | description: currentDescription 174 | }; 175 | chrome.runtime.sendMessage(messageToBackground); 176 | console.log("Content script: Sent csToBgCropData to background with DPR adjusted coordinates:", croppedCoordinates); 177 | } else { 178 | console.log("Content script: Selection was too small or invalid."); 179 | chrome.runtime.sendMessage({ 180 | type: "selectionCancelled", 181 | annotationType: currentAnnotationType 182 | }); 183 | } 184 | // Reset stored type and description 185 | currentAnnotationType = null; 186 | currentDescription = null; 187 | } 188 | 189 | function handleKeyDown(event) { 190 | if (event.key === 'Escape') { 191 | console.log("Content script: Escape key pressed."); 192 | if (isDrawing) { 193 | isDrawing = false; 194 | console.log("Content script: Cancelling active drawing."); 195 | } 196 | if (selectionBox) selectionBox.style.display = 'none'; 197 | cleanUpAllSelectionListeners(); 198 | removeSelectionNotification(); 199 | 200 | chrome.runtime.sendMessage({ 201 | type: "selectionCancelled", 202 | annotationType: currentAnnotationType // Include type 203 | }); 204 | console.log("Content script: Selection cancelled via Escape. Sent 'selectionCancelled' for type:", currentAnnotationType); 205 | // Reset stored type and description 206 | currentAnnotationType = null; 207 | currentDescription = null; 208 | } 209 | } 210 | 211 | function cleanUpInProgressSelectionListeners() { 212 | document.removeEventListener('mousemove', handleMouseMove); 213 | document.removeEventListener('mouseup', handleMouseUp); 214 | console.log("Content script: Cleaned up mousemove and mouseup listeners."); 215 | } 216 | 217 | function cleanUpAllSelectionListeners() { 218 | document.removeEventListener('mousedown', handleMouseDown); 219 | document.removeEventListener('mousemove', handleMouseMove); 220 | document.removeEventListener('mouseup', handleMouseUp); 221 | document.removeEventListener('keydown', handleKeyDown); 222 | console.log("Content script: Cleaned up all selection listeners (mousedown, mousemove, mouseup, keydown)."); 223 | } 224 | 225 | // Initial creation of the selection box 226 | selectionBox = createSelectionBoxElement(); 227 | 228 | } 229 | else { 230 | console.log("Content script: Already initialized. Waiting for 'startSelection' message."); 231 | } 232 | -------------------------------------------------------------------------------- /js/popup.js: -------------------------------------------------------------------------------- 1 | // At the top of popup.js 2 | let currentAnnotationTypeForCrop = null; 3 | 4 | window.onload = function () { 5 | initElements(); 6 | 7 | $(function () { 8 | $('[data-toggle="tooltip"]').tooltip() 9 | }) 10 | } 11 | 12 | function initElements() { 13 | annotationListeners(); 14 | exportListeners(); 15 | updateCounters(); 16 | registerPopupMessageListener(); // Added listener registration 17 | $(function () { 18 | $('[data-toggle="tooltip"]').tooltip() 19 | }) 20 | } 21 | 22 | function annotationListeners() { 23 | $(document).on('click', '#BugBtn', showBugReport); 24 | $(document).on('click', '#IdeaBtn', showIdeaReport); 25 | $(document).on('click', '#NoteBtn', showNoteReport); 26 | $(document).on('click', '#QuestionBtn', showQuestionReport); 27 | 28 | $(document).on('click', '#addNewBugBtn', () => { 29 | addNewBug("") 30 | }); 31 | $(document).on('click', '#addNewIdeaBtn', () => { 32 | addNewIdea("") 33 | }); 34 | $(document).on('click', '#addNewNoteBtn', () => { 35 | addNewNote("") 36 | }); 37 | $(document).on('click', '#addNewQuestionBtn', () => { 38 | addNewQuestion("") 39 | }); 40 | 41 | $(document).on('click', '#addNewBugSCBtn', () => { 42 | addNewAnnotationWithScreenShot("bug") 43 | }); 44 | $(document).on('click', '#addNewIdeaSCBtn', () => { 45 | addNewAnnotationWithScreenShot("idea") 46 | }); 47 | $(document).on('click', '#addNewNoteSCBtn', () => { 48 | addNewAnnotationWithScreenShot("note") 49 | }); 50 | $(document).on('click', '#addNewQuestionSCBtn', () => { 51 | addNewAnnotationWithScreenShot("question") 52 | }); 53 | 54 | // New listeners for crop buttons 55 | $(document).on('click', '#addNewBugCropBtn', () => { handleCropScreenshot("bug"); }); 56 | $(document).on('click', '#addNewIdeaCropBtn', () => { handleCropScreenshot("idea"); }); 57 | $(document).on('click', '#addNewNoteCropBtn', () => { handleCropScreenshot("note"); }); 58 | $(document).on('click', '#addNewQuestionCropBtn', () => { handleCropScreenshot("question"); }); 59 | } 60 | 61 | function handleCropScreenshot(type) { 62 | // Get description based on type 63 | let description = ""; 64 | let descriptionFieldId = ""; 65 | switch (type) { 66 | case "bug": descriptionFieldId = "#newBugDescription"; break; 67 | case "idea": descriptionFieldId = "#newIdeaDescription"; break; 68 | case "note": descriptionFieldId = "#newNoteDescription"; break; 69 | case "question": descriptionFieldId = "#newQuestionDescription"; break; 70 | default: 71 | console.error("Unknown annotation type for crop:", type); 72 | return; 73 | } 74 | description = $(descriptionFieldId).val().trim(); 75 | 76 | if (description === "") { 77 | alert("Please enter a description before taking a cropped screenshot."); 78 | return; // Prevent starting selection if description is empty 79 | } 80 | 81 | // currentAnnotationTypeForCrop is still useful for 'selectionCancelled' if popup handles it. 82 | // If not, it can be removed from this function. Let's assume it might be used for cancellation. 83 | currentAnnotationTypeForCrop = type; 84 | 85 | chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { 86 | if (tabs && tabs[0] && tabs[0].id != null) { 87 | const tabId = tabs[0].id; 88 | const messagePayload = { 89 | type: "startSelection", 90 | annotationType: type, // Pass the annotation type 91 | description: description // Pass the description 92 | }; 93 | 94 | chrome.tabs.sendMessage(tabId, messagePayload, function(response) { 95 | if (chrome.runtime.lastError) { 96 | console.error("Error starting selection (sendMessage):", chrome.runtime.lastError.message); 97 | alert("Failed to start selection mode. Please ensure the page is fully loaded and try again. Error: " + chrome.runtime.lastError.message); 98 | currentAnnotationTypeForCrop = null; // Reset 99 | return; 100 | } 101 | if (response && response.status === "selectionStarted") { 102 | console.log("Popup: Selection started in content script for type '"+type+"' with description '"+description.substring(0,20)+"...'."); 103 | // Popup remains open. No window.close(). 104 | // No longer processes coordinates here. 105 | } else { 106 | console.warn("Popup: Content script did not confirm selection start. Response:", response); 107 | alert("Could not initiate selection on the page. The selection script might not have responded correctly. Please try refreshing the page."); 108 | currentAnnotationTypeForCrop = null; // Reset 109 | } 110 | }); 111 | } else { 112 | console.error("Popup: No active tab with valid ID found."); 113 | alert("No active tab found. Please select a tab to capture from."); 114 | currentAnnotationTypeForCrop = null; // Reset 115 | } 116 | }); 117 | } 118 | 119 | // Register the listener for messages from content script 120 | function registerPopupMessageListener() { 121 | chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { 122 | // Removed 'selectionCoordinates' handler 123 | if (request.type === "selectionCancelled") { 124 | console.log("Popup: Selection cancelled by content script for type:", currentAnnotationTypeForCrop); 125 | // Optionally, re-enable parts of the UI if they were disabled, 126 | // or show a message in the popup. For now, just log and reset. 127 | // A more robust check would be if (currentAnnotationTypeForCrop === request.annotationTypeFromContentScript) 128 | // but this requires content script to send annotationType on cancellation. 129 | currentAnnotationTypeForCrop = null; // Reset 130 | } 131 | // No 'return true;' as this listener does not call sendResponse() asynchronously 132 | }); 133 | } 134 | 135 | function showBugReport() { 136 | hideAllReports(); 137 | $("#addNewBug").fadeIn(); 138 | $('#newBugDescription').focus(); 139 | }; 140 | 141 | function showIdeaReport() { 142 | hideAllReports(); 143 | $("#addNewIdea").fadeIn(); 144 | $('#newIdeaDescription').focus(); 145 | }; 146 | 147 | function showNoteReport() { 148 | hideAllReports(); 149 | $("#addNewNote").fadeIn(); 150 | $('#newNoteDescription').focus(); 151 | }; 152 | 153 | function showQuestionReport() { 154 | hideAllReports(); 155 | $("#addNewQuestion").fadeIn(); 156 | $('#newQuestionDescription').focus(); 157 | }; 158 | 159 | function addNewBug(imageURL) { 160 | console.log("Popup: Inside addNewBug. imageURL (first 100 chars):", imageURL ? imageURL.substring(0, 100) : "null"); 161 | var bugName = $('#newBugDescription').val().trim(); 162 | console.log("Popup: Bug name:", bugName); 163 | if (bugName == "") return; 164 | console.log("Popup: Sending message to background for addBug. Name:", bugName); 165 | 166 | chrome.runtime.sendMessage({ 167 | type: "addBug", 168 | name: bugName, 169 | imageURL: imageURL 170 | }, function (response) { 171 | updateCounters(); 172 | }); 173 | 174 | clearAllReports(); 175 | hideAllReports(); 176 | // window.close(); // <-- REMOVED THIS LINE 177 | }; 178 | 179 | function addNewNote(imageURL) { 180 | console.log("Popup: Inside addNewNote. imageURL (first 100 chars):", imageURL ? imageURL.substring(0, 100) : "null"); 181 | var noteName = $('#newNoteDescription').val().trim(); 182 | console.log("Popup: Note name:", noteName); 183 | if (noteName == "") return; 184 | console.log("Popup: Sending message to background for addNote. Name:", noteName); 185 | chrome.runtime.sendMessage({ 186 | type: "addNote", 187 | name: noteName, 188 | imageURL: imageURL 189 | }, function (response) { 190 | updateCounters(); 191 | }); 192 | 193 | clearAllReports(); 194 | hideAllReports(); 195 | // window.close(); // <-- REMOVED THIS LINE 196 | }; 197 | 198 | function addNewIdea(imageURL) { 199 | console.log("Popup: Inside addNewIdea. imageURL (first 100 chars):", imageURL ? imageURL.substring(0, 100) : "null"); 200 | var ideaName = $('#newIdeaDescription').val().trim(); 201 | console.log("Popup: Idea name:", ideaName); 202 | if (ideaName == "") return; 203 | console.log("Popup: Sending message to background for addIdea. Name:", ideaName); 204 | chrome.runtime.sendMessage({ 205 | type: "addIdea", 206 | name: ideaName, 207 | imageURL: imageURL 208 | }, function (response) { 209 | updateCounters(); 210 | }); 211 | 212 | clearAllReports(); 213 | hideAllReports(); 214 | // window.close(); // <-- REMOVED THIS LINE 215 | }; 216 | 217 | function addNewQuestion(imageURL) { 218 | console.log("Popup: Inside addNewQuestion. imageURL (first 100 chars):", imageURL ? imageURL.substring(0, 100) : "null"); 219 | var questionName = $('#newQuestionDescription').val().trim(); 220 | console.log("Popup: Question name:", questionName); 221 | if (questionName == "") return; 222 | console.log("Popup: Sending message to background for addQuestion. Name:", questionName); 223 | chrome.runtime.sendMessage({ 224 | type: "addQuestion", 225 | name: questionName, 226 | imageURL: imageURL 227 | }, function (response) { 228 | updateCounters(); 229 | }); 230 | 231 | clearAllReports(); 232 | hideAllReports(); 233 | // window.close(); // <-- REMOVED THIS LINE 234 | }; 235 | 236 | 237 | 238 | function addNewAnnotationWithScreenShot(type) { 239 | chrome.tabs.captureVisibleTab((screenshotUrl) => { 240 | if (screenshotUrl === 'undefined') screenshotUrl = ""; 241 | switch (type) { 242 | case "bug": 243 | addNewBug(screenshotUrl); 244 | break; 245 | case "idea": 246 | addNewIdea(screenshotUrl); 247 | break; 248 | case "question": 249 | addNewQuestion(screenshotUrl); 250 | break; 251 | case "note": 252 | addNewNote(screenshotUrl); 253 | break; 254 | } 255 | }) 256 | } 257 | 258 | /* Export to CSV */ 259 | function exportSessionCSV() { 260 | chrome.runtime.sendMessage({ 261 | type: "exportSessionCSV" 262 | }); 263 | }; 264 | 265 | function exportListeners() { 266 | $(document).on('click', '#exportCSVBtn', exportSessionCSV); 267 | $(document).on('click', '#exportJsonBtn', exportSessionJSon); 268 | $(document).on('click', '#importJsonBtn', () => { 269 | $('#importJsonInput').click() 270 | }); 271 | $(document).on('change', '#importJsonInput', importSessionJSon); 272 | } 273 | 274 | 275 | 276 | /* Export to JSon */ 277 | function exportSessionJSon() { 278 | chrome.runtime.sendMessage({ 279 | type: "exportSessionJSon" 280 | }); 281 | }; 282 | 283 | 284 | /* Import from JSon */ 285 | function importSessionJSon(evt) { 286 | var files = evt.target.files; // FileList object 287 | var reader = new FileReader(); 288 | reader.onload = onReaderLoad; 289 | reader.readAsText(files[0]); 290 | }; 291 | 292 | function onReaderLoad(event) { 293 | clearAllReports(); 294 | var importSession = event.target.result; 295 | chrome.runtime.sendMessage({ 296 | type: "importSessionJSon", 297 | jSonSession: importSession 298 | }, function (response) { 299 | updateCounters(); 300 | //Reset input value 301 | $('#importJsonInput').val(""); 302 | }); 303 | 304 | } 305 | 306 | 307 | document.addEventListener('DOMContentLoaded', function () { 308 | var cancelAnnotationBtn = document.getElementsByName("Cancel"); 309 | for (var i = 0; i < cancelAnnotationBtn.length; i++) { 310 | cancelAnnotationBtn[i].addEventListener('click', cancelAnnotation); 311 | } 312 | }, false); 313 | 314 | function cancelAnnotation() { 315 | clearAllReports(); 316 | hideAllReports(); 317 | }; 318 | 319 | function clearAllReports() { 320 | var descriptions = document.getElementsByTagName("textarea"); 321 | for (i = 0; i < descriptions.length; i++) { 322 | descriptions[i].value = ""; 323 | } 324 | }; 325 | 326 | function hideAllReports() { 327 | $("#newBugDescription").val(''); 328 | $("#newIdeaDescription").val(''); 329 | $("#newNoteDescription").val(''); 330 | $("#newQuestionDescription").val(''); 331 | 332 | $("#addNewBug").slideUp(); 333 | $("#addNewIdea").slideUp(); 334 | $("#addNewNote").slideUp(); 335 | $("#addNewQuestion").slideUp(); 336 | }; 337 | 338 | document.addEventListener('DOMContentLoaded', function () { 339 | var previewBtn = document.getElementById('previewBtn'); 340 | previewBtn.addEventListener('click', function () { 341 | chrome.runtime.sendMessage({ type: "getSessionData" }, function (response) { 342 | if (response.annotationsCount === 0) return; 343 | 344 | chrome.tabs.create({ 345 | url: chrome.runtime.getURL("HTMLReport/preview.html"), 346 | 'active': false 347 | }); 348 | }); 349 | }, false); 350 | }, false); 351 | 352 | function updateCounters() { 353 | chrome.runtime.sendMessage({ type: "getSessionData" }, function (response) { 354 | if (response.bugs > 0) $("#bugCounter").html(" " + response.bugs + " "); 355 | else $("#bugCounter").html(""); 356 | 357 | if (response.notes > 0) $("#noteCounter").html(" " + response.notes + " "); 358 | else $("#noteCounter").html(""); 359 | 360 | if (response.ideas > 0) $("#ideaCounter").html(" " + response.ideas + " "); 361 | else $("#ideaCounter").html(""); 362 | 363 | if (response.questions > 0) $("#questionCounter").html(" " + response.questions + " "); 364 | else $("#questionCounter").html(""); 365 | }); 366 | } 367 | 368 | document.addEventListener('DOMContentLoaded', function () { 369 | var newBugDescription = document.getElementById("newBugDescription"); 370 | newBugDescription.addEventListener("keypress", function (e) { 371 | var key = e.which || e.keyCode; 372 | // if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey) { 373 | // $('#newBugDescription').val($('#newBugDescription').val() + '\n'); 374 | // } 375 | if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey) { 376 | addNewBug(""); 377 | } 378 | if (key == 13) { // 13 is enter 379 | if (e.shiftKey == true) { 380 | addNewAnnotationWithScreenShot("bug"); 381 | } 382 | } 383 | }, false); 384 | }, false); 385 | 386 | document.addEventListener('DOMContentLoaded', function () { 387 | var newIdeaDescription = document.getElementById("newIdeaDescription"); 388 | newIdeaDescription.addEventListener("keypress", function (e) { 389 | var key = e.which || e.keyCode; 390 | if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey) { 391 | addNewIdea(""); 392 | } 393 | if (key == 13) { // 13 is enter 394 | if (e.shiftKey == true) { 395 | addNewAnnotationWithScreenShot("idea"); 396 | } 397 | } 398 | }, false); 399 | }, false); 400 | 401 | document.addEventListener('DOMContentLoaded', function () { 402 | var newNoteDescription = document.getElementById("newNoteDescription"); 403 | newNoteDescription.addEventListener("keypress", function (e) { 404 | var key = e.which || e.keyCode; 405 | if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey) { 406 | addNewNote(""); 407 | } 408 | if (key == 13) { // 13 is enter 409 | if (e.shiftKey == true) { 410 | addNewAnnotationWithScreenShot("note"); 411 | } 412 | } 413 | }, false); 414 | }, false); 415 | 416 | document.addEventListener('DOMContentLoaded', function () { 417 | var newQuestionDescription = document.getElementById("newQuestionDescription"); 418 | newQuestionDescription.addEventListener("keypress", function (e) { 419 | var key = e.which || e.keyCode; 420 | if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey) { 421 | addNewQuestion(""); 422 | } 423 | if (key == 13) { // 13 is enter 424 | if (e.shiftKey == true) { 425 | addNewAnnotationWithScreenShot("question"); 426 | } 427 | } 428 | }, false); 429 | }, false); 430 | 431 | document.addEventListener('DOMContentLoaded', function () { 432 | var resetBtn = document.getElementById('resetBtn'); 433 | resetBtn.addEventListener('click', function () { 434 | chrome.runtime.sendMessage({ type: "getSessionData" }, function (response) { 435 | if (response.annotationsCount === 0) return; 436 | 437 | var resetConfirmation = document.getElementById('resetConfirmation'); 438 | $("#resetConfirmation").fadeIn(); 439 | }); 440 | }, false); 441 | }, false); 442 | 443 | document.addEventListener('DOMContentLoaded', function () { 444 | var resetBtnNo = document.getElementById('resetNo'); 445 | resetBtnNo.addEventListener('click', function () { 446 | $("#resetConfirmation").slideUp(); 447 | }); 448 | }); 449 | 450 | document.addEventListener('DOMContentLoaded', function () { 451 | var resetBtnNo = document.getElementById('resetYes'); 452 | resetBtnNo.addEventListener('click', function () { 453 | chrome.runtime.sendMessage({ type: "clearSession" }, function (response) { 454 | $("#bugCounter").html(""); 455 | $("#ideaCounter").html(""); 456 | $("#noteCounter").html(""); 457 | $("#questionCounter").html(""); 458 | }); 459 | $("#resetConfirmation").slideUp(); 460 | }); 461 | }); 462 | -------------------------------------------------------------------------------- /lib/date.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Version: 1.0 Alpha-1 3 | * Build Date: 13-Nov-2007 4 | * Copyright (c) 2006-2007, Coolite Inc. (http://www.coolite.com/). All rights reserved. 5 | * License: Licensed under The MIT License. See license.txt and http://www.datejs.com/license/. 6 | * Website: http://www.datejs.com/ or http://www.coolite.com/datejs/ 7 | */ 8 | Date.CultureInfo={name:"en-US",englishName:"English (United States)",nativeName:"English (United States)",dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],abbreviatedDayNames:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],shortestDayNames:["Su","Mo","Tu","We","Th","Fr","Sa"],firstLetterDayNames:["S","M","T","W","T","F","S"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],abbreviatedMonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],amDesignator:"AM",pmDesignator:"PM",firstDayOfWeek:0,twoDigitYearMax:2029,dateElementOrder:"mdy",formatPatterns:{shortDate:"M/d/yyyy",longDate:"dddd, MMMM dd, yyyy",shortTime:"h:mm tt",longTime:"h:mm:ss tt",fullDateTime:"dddd, MMMM dd, yyyy h:mm:ss tt",sortableDateTime:"yyyy-MM-ddTHH:mm:ss",universalSortableDateTime:"yyyy-MM-dd HH:mm:ssZ",rfc1123:"ddd, dd MMM yyyy HH:mm:ss GMT",monthDay:"MMMM dd",yearMonth:"MMMM, yyyy"},regexPatterns:{jan:/^jan(uary)?/i,feb:/^feb(ruary)?/i,mar:/^mar(ch)?/i,apr:/^apr(il)?/i,may:/^may/i,jun:/^jun(e)?/i,jul:/^jul(y)?/i,aug:/^aug(ust)?/i,sep:/^sep(t(ember)?)?/i,oct:/^oct(ober)?/i,nov:/^nov(ember)?/i,dec:/^dec(ember)?/i,sun:/^su(n(day)?)?/i,mon:/^mo(n(day)?)?/i,tue:/^tu(e(s(day)?)?)?/i,wed:/^we(d(nesday)?)?/i,thu:/^th(u(r(s(day)?)?)?)?/i,fri:/^fr(i(day)?)?/i,sat:/^sa(t(urday)?)?/i,future:/^next/i,past:/^last|past|prev(ious)?/i,add:/^(\+|after|from)/i,subtract:/^(\-|before|ago)/i,yesterday:/^yesterday/i,today:/^t(oday)?/i,tomorrow:/^tomorrow/i,now:/^n(ow)?/i,millisecond:/^ms|milli(second)?s?/i,second:/^sec(ond)?s?/i,minute:/^min(ute)?s?/i,hour:/^h(ou)?rs?/i,week:/^w(ee)?k/i,month:/^m(o(nth)?s?)?/i,day:/^d(ays?)?/i,year:/^y((ea)?rs?)?/i,shortMeridian:/^(a|p)/i,longMeridian:/^(a\.?m?\.?|p\.?m?\.?)/i,timezone:/^((e(s|d)t|c(s|d)t|m(s|d)t|p(s|d)t)|((gmt)?\s*(\+|\-)\s*\d\d\d\d?)|gmt)/i,ordinalSuffix:/^\s*(st|nd|rd|th)/i,timeContext:/^\s*(\:|a|p)/i},abbreviatedTimeZoneStandard:{GMT:"-000",EST:"-0400",CST:"-0500",MST:"-0600",PST:"-0700"},abbreviatedTimeZoneDST:{GMT:"-000",EDT:"-0500",CDT:"-0600",MDT:"-0700",PDT:"-0800"}}; 9 | Date.getMonthNumberFromName=function(name){var n=Date.CultureInfo.monthNames,m=Date.CultureInfo.abbreviatedMonthNames,s=name.toLowerCase();for(var i=0;idate)?1:(this=start.getTime()&&t<=end.getTime();};Date.prototype.addMilliseconds=function(value){this.setMilliseconds(this.getMilliseconds()+value);return this;};Date.prototype.addSeconds=function(value){return this.addMilliseconds(value*1000);};Date.prototype.addMinutes=function(value){return this.addMilliseconds(value*60000);};Date.prototype.addHours=function(value){return this.addMilliseconds(value*3600000);};Date.prototype.addDays=function(value){return this.addMilliseconds(value*86400000);};Date.prototype.addWeeks=function(value){return this.addMilliseconds(value*604800000);};Date.prototype.addMonths=function(value){var n=this.getDate();this.setDate(1);this.setMonth(this.getMonth()+value);this.setDate(Math.min(n,this.getDaysInMonth()));return this;};Date.prototype.addYears=function(value){return this.addMonths(value*12);};Date.prototype.add=function(config){if(typeof config=="number"){this._orient=config;return this;} 14 | var x=config;if(x.millisecond||x.milliseconds){this.addMilliseconds(x.millisecond||x.milliseconds);} 15 | if(x.second||x.seconds){this.addSeconds(x.second||x.seconds);} 16 | if(x.minute||x.minutes){this.addMinutes(x.minute||x.minutes);} 17 | if(x.hour||x.hours){this.addHours(x.hour||x.hours);} 18 | if(x.month||x.months){this.addMonths(x.month||x.months);} 19 | if(x.year||x.years){this.addYears(x.year||x.years);} 20 | if(x.day||x.days){this.addDays(x.day||x.days);} 21 | return this;};Date._validate=function(value,min,max,name){if(typeof value!="number"){throw new TypeError(value+" is not a Number.");}else if(valuemax){throw new RangeError(value+" is not a valid value for "+name+".");} 22 | return true;};Date.validateMillisecond=function(n){return Date._validate(n,0,999,"milliseconds");};Date.validateSecond=function(n){return Date._validate(n,0,59,"seconds");};Date.validateMinute=function(n){return Date._validate(n,0,59,"minutes");};Date.validateHour=function(n){return Date._validate(n,0,23,"hours");};Date.validateDay=function(n,year,month){return Date._validate(n,1,Date.getDaysInMonth(year,month),"days");};Date.validateMonth=function(n){return Date._validate(n,0,11,"months");};Date.validateYear=function(n){return Date._validate(n,1,9999,"seconds");};Date.prototype.set=function(config){var x=config;if(!x.millisecond&&x.millisecond!==0){x.millisecond=-1;} 23 | if(!x.second&&x.second!==0){x.second=-1;} 24 | if(!x.minute&&x.minute!==0){x.minute=-1;} 25 | if(!x.hour&&x.hour!==0){x.hour=-1;} 26 | if(!x.day&&x.day!==0){x.day=-1;} 27 | if(!x.month&&x.month!==0){x.month=-1;} 28 | if(!x.year&&x.year!==0){x.year=-1;} 29 | if(x.millisecond!=-1&&Date.validateMillisecond(x.millisecond)){this.addMilliseconds(x.millisecond-this.getMilliseconds());} 30 | if(x.second!=-1&&Date.validateSecond(x.second)){this.addSeconds(x.second-this.getSeconds());} 31 | if(x.minute!=-1&&Date.validateMinute(x.minute)){this.addMinutes(x.minute-this.getMinutes());} 32 | if(x.hour!=-1&&Date.validateHour(x.hour)){this.addHours(x.hour-this.getHours());} 33 | if(x.month!==-1&&Date.validateMonth(x.month)){this.addMonths(x.month-this.getMonth());} 34 | if(x.year!=-1&&Date.validateYear(x.year)){this.addYears(x.year-this.getFullYear());} 35 | if(x.day!=-1&&Date.validateDay(x.day,this.getFullYear(),this.getMonth())){this.addDays(x.day-this.getDate());} 36 | if(x.timezone){this.setTimezone(x.timezone);} 37 | if(x.timezoneOffset){this.setTimezoneOffset(x.timezoneOffset);} 38 | return this;};Date.prototype.clearTime=function(){this.setHours(0);this.setMinutes(0);this.setSeconds(0);this.setMilliseconds(0);return this;};Date.prototype.isLeapYear=function(){var y=this.getFullYear();return(((y%4===0)&&(y%100!==0))||(y%400===0));};Date.prototype.isWeekday=function(){return!(this.is().sat()||this.is().sun());};Date.prototype.getDaysInMonth=function(){return Date.getDaysInMonth(this.getFullYear(),this.getMonth());};Date.prototype.moveToFirstDayOfMonth=function(){return this.set({day:1});};Date.prototype.moveToLastDayOfMonth=function(){return this.set({day:this.getDaysInMonth()});};Date.prototype.moveToDayOfWeek=function(day,orient){var diff=(day-this.getDay()+7*(orient||+1))%7;return this.addDays((diff===0)?diff+=7*(orient||+1):diff);};Date.prototype.moveToMonth=function(month,orient){var diff=(month-this.getMonth()+12*(orient||+1))%12;return this.addMonths((diff===0)?diff+=12*(orient||+1):diff);};Date.prototype.getDayOfYear=function(){return Math.floor((this-new Date(this.getFullYear(),0,1))/86400000);};Date.prototype.getWeekOfYear=function(firstDayOfWeek){var y=this.getFullYear(),m=this.getMonth(),d=this.getDate();var dow=firstDayOfWeek||Date.CultureInfo.firstDayOfWeek;var offset=7+1-new Date(y,0,1).getDay();if(offset==8){offset=1;} 39 | var daynum=((Date.UTC(y,m,d,0,0,0)-Date.UTC(y,0,1,0,0,0))/86400000)+1;var w=Math.floor((daynum-offset+7)/7);if(w===dow){y--;var prevOffset=7+1-new Date(y,0,1).getDay();if(prevOffset==2||prevOffset==8){w=53;}else{w=52;}} 40 | return w;};Date.prototype.isDST=function(){console.log('isDST');return this.toString().match(/(E|C|M|P)(S|D)T/)[2]=="D";};Date.prototype.getTimezone=function(){return Date.getTimezoneAbbreviation(this.getUTCOffset,this.isDST());};Date.prototype.setTimezoneOffset=function(s){var here=this.getTimezoneOffset(),there=Number(s)*-6/10;this.addMinutes(there-here);return this;};Date.prototype.setTimezone=function(s){return this.setTimezoneOffset(Date.getTimezoneOffset(s));};Date.prototype.getUTCOffset=function(){var n=this.getTimezoneOffset()*-10/6,r;if(n<0){r=(n-10000).toString();return r[0]+r.substr(2);}else{r=(n+10000).toString();return"+"+r.substr(1);}};Date.prototype.getDayName=function(abbrev){return abbrev?Date.CultureInfo.abbreviatedDayNames[this.getDay()]:Date.CultureInfo.dayNames[this.getDay()];};Date.prototype.getMonthName=function(abbrev){return abbrev?Date.CultureInfo.abbreviatedMonthNames[this.getMonth()]:Date.CultureInfo.monthNames[this.getMonth()];};Date.prototype._toString=Date.prototype.toString;Date.prototype.toString=function(format){var self=this;var p=function p(s){return(s.toString().length==1)?"0"+s:s;};return format?format.replace(/dd?d?d?|MM?M?M?|yy?y?y?|hh?|HH?|mm?|ss?|tt?|zz?z?/g,function(format){switch(format){case"hh":return p(self.getHours()<13?self.getHours():(self.getHours()-12));case"h":return self.getHours()<13?self.getHours():(self.getHours()-12);case"HH":return p(self.getHours());case"H":return self.getHours();case"mm":return p(self.getMinutes());case"m":return self.getMinutes();case"ss":return p(self.getSeconds());case"s":return self.getSeconds();case"yyyy":return self.getFullYear();case"yy":return self.getFullYear().toString().substring(2,4);case"dddd":return self.getDayName();case"ddd":return self.getDayName(true);case"dd":return p(self.getDate());case"d":return self.getDate().toString();case"MMMM":return self.getMonthName();case"MMM":return self.getMonthName(true);case"MM":return p((self.getMonth()+1));case"M":return self.getMonth()+1;case"t":return self.getHours()<12?Date.CultureInfo.amDesignator.substring(0,1):Date.CultureInfo.pmDesignator.substring(0,1);case"tt":return self.getHours()<12?Date.CultureInfo.amDesignator:Date.CultureInfo.pmDesignator;case"zzz":case"zz":case"z":return"";}}):this._toString();}; 41 | Date.now=function(){return new Date();};Date.today=function(){return Date.now().clearTime();};Date.prototype._orient=+1;Date.prototype.next=function(){this._orient=+1;return this;};Date.prototype.last=Date.prototype.prev=Date.prototype.previous=function(){this._orient=-1;return this;};Date.prototype._is=false;Date.prototype.is=function(){this._is=true;return this;};Number.prototype._dateElement="day";Number.prototype.fromNow=function(){var c={};c[this._dateElement]=this;return Date.now().add(c);};Number.prototype.ago=function(){var c={};c[this._dateElement]=this*-1;return Date.now().add(c);};(function(){var $D=Date.prototype,$N=Number.prototype;var dx=("sunday monday tuesday wednesday thursday friday saturday").split(/\s/),mx=("january february march april may june july august september october november december").split(/\s/),px=("Millisecond Second Minute Hour Day Week Month Year").split(/\s/),de;var df=function(n){return function(){if(this._is){this._is=false;return this.getDay()==n;} 42 | return this.moveToDayOfWeek(n,this._orient);};};for(var i=0;i0&&!last){try{q=d.call(this,r[1]);}catch(ex){last=true;}}else{last=true;} 70 | if(!last&&q[1].length===0){last=true;} 71 | if(!last){var qx=[];for(var j=0;j0){rx[0]=rx[0].concat(p[0]);rx[1]=p[1];}} 73 | if(rx[1].length1){args=Array.prototype.slice.call(arguments);}else if(arguments[0]instanceof Array){args=arguments[0];} 80 | if(args){for(var i=0,px=args.shift();i2)?n:(n+(((n+2000)Date.getDaysInMonth(this.year,this.month)){throw new RangeError(this.day+" is not a valid value for days.");} 84 | var r=new Date(this.year,this.month,this.day,this.hour,this.minute,this.second);if(this.timezone){r.set({timezone:this.timezone});}else if(this.timezoneOffset){r.set({timezoneOffset:this.timezoneOffset});} 85 | return r;},finish:function(x){x=(x instanceof Array)?flattenAndCompact(x):[x];if(x.length===0){return null;} 86 | for(var i=0;i" 35 | ], 36 | "js": [ 37 | "js/content_script.js" 38 | ], 39 | "run_at": "document_idle" 40 | } 41 | ] 42 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app", 3 | "version": "1.0.0", 4 | "description": "A Chrome extension designed for making web exploratory testing easier", 5 | "main": "background.js", 6 | "directories": { 7 | "lib": "lib", 8 | "test": "test" 9 | }, 10 | "devDependencies": { 11 | "@babel/core": "^7.27.1", 12 | "@babel/preset-env": "^7.27.2", 13 | "babel-jest": "^29.7.0", 14 | "jest": "^29.7.0", 15 | "jest-environment-jsdom": "^29.7.0" 16 | }, 17 | "scripts": { 18 | "test": "jest" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/morvader/ExploratoryTestingChromeExtension.git" 23 | }, 24 | "keywords": [], 25 | "author": "", 26 | "license": "ISC", 27 | "bugs": { 28 | "url": "https://github.com/morvader/ExploratoryTestingChromeExtension/issues" 29 | }, 30 | "homepage": "https://github.com/morvader/ExploratoryTestingChromeExtension#readme" 31 | } 32 | -------------------------------------------------------------------------------- /popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Exploratory Testing Chrome Extension 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
Add new annotation
17 |
18 | 19 |
20 |
21 | 23 |
24 |
25 |
26 | 28 |
29 |
30 |
31 | 33 | 36 | 39 | 41 |
42 |
43 |
44 |
45 | 46 |
47 |
48 | 50 |
51 |
52 |
53 | 55 |
56 |
57 |
58 | 61 | 64 | 67 | 69 |
70 |
71 |
72 |
73 | 74 |
75 |
76 | 78 |
79 |
80 |
81 | 83 |
84 |
85 |
86 | 89 | 92 | 95 | 97 |
98 |
99 |
100 |
101 | 102 |
103 |
104 | 106 |
107 |
108 |
109 | 111 |
112 |
113 |
114 | 116 | 119 | 122 | 124 |
125 |
126 |
127 |
128 |
129 | 130 |
131 |
132 |
133 | 134 | 136 | 138 | 141 | 142 | 143 | 145 | 146 |
147 | 148 |
149 | 158 |
159 | 160 | 161 | -------------------------------------------------------------------------------- /screenshots/addAnnotation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/screenshots/addAnnotation.png -------------------------------------------------------------------------------- /screenshots/addAnnotation_1400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/screenshots/addAnnotation_1400.png -------------------------------------------------------------------------------- /screenshots/addAnnotation_440.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/screenshots/addAnnotation_440.png -------------------------------------------------------------------------------- /screenshots/extension.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/screenshots/extension.PNG -------------------------------------------------------------------------------- /screenshots/main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/screenshots/main.png -------------------------------------------------------------------------------- /screenshots/main_440.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/screenshots/main_440.png -------------------------------------------------------------------------------- /screenshots/new_Annotation.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/screenshots/new_Annotation.PNG -------------------------------------------------------------------------------- /screenshots/report.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/screenshots/report.PNG -------------------------------------------------------------------------------- /screenshots/report.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/screenshots/report.png -------------------------------------------------------------------------------- /screenshots/report_1400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/screenshots/report_1400.png -------------------------------------------------------------------------------- /screenshots/report_440.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morvader/ExploratoryTestingChromeExtension/c3379c3f9d163503e27c5844c2667b1ea1341d20/screenshots/report_440.png -------------------------------------------------------------------------------- /src/Annotation.js: -------------------------------------------------------------------------------- 1 | // Clase base para anotaciones 2 | export class Annotation { 3 | constructor(name, url, timestamp, imageURL) { 4 | this.type = ""; 5 | this.name = name; 6 | this.url = url; 7 | this.timestamp = timestamp; 8 | this.imageURL = imageURL; 9 | } 10 | 11 | getName() { 12 | return this.name; 13 | } 14 | 15 | setName(newName) { 16 | this.name = newName; 17 | } 18 | 19 | getURL() { 20 | return this.url; 21 | } 22 | 23 | getTimeStamp() { 24 | return new Date(this.timestamp); 25 | } 26 | 27 | setImageURL(imageURL) { 28 | this.imageURL = imageURL; 29 | } 30 | 31 | getImageURL() { 32 | return this.imageURL; 33 | } 34 | } 35 | 36 | // Clase Bug 37 | export class Bug extends Annotation { 38 | constructor(name, url, timestamp, imageURL) { 39 | super(name, url, timestamp, imageURL); 40 | this.type = this.getType(); 41 | } 42 | 43 | getType() { 44 | return "Bug"; 45 | } 46 | } 47 | 48 | // Clase Idea 49 | export class Idea extends Annotation { 50 | constructor(name, url, timestamp, imageURL) { 51 | super(name, url, timestamp, imageURL); 52 | this.type = this.getType(); 53 | } 54 | 55 | getType() { 56 | return "Idea"; 57 | } 58 | } 59 | 60 | // Clase Note 61 | export class Note extends Annotation { 62 | constructor(name, url, timestamp, imageURL) { 63 | super(name, url, timestamp, imageURL); 64 | this.type = this.getType(); 65 | } 66 | 67 | getType() { 68 | return "Note"; 69 | } 70 | } 71 | 72 | // Clase Question 73 | export class Question extends Annotation { 74 | constructor(name, url, timestamp, imageURL) { 75 | super(name, url, timestamp, imageURL); 76 | this.type = this.getType(); 77 | } 78 | 79 | getType() { 80 | return "Question"; 81 | } 82 | } 83 | 84 | -------------------------------------------------------------------------------- /src/ExportSessionCSV.js: -------------------------------------------------------------------------------- 1 | export class ExportSessionCSV { 2 | constructor(session) { 3 | this.session = session; 4 | } 5 | 6 | getCSVData() { 7 | let csvData = "TimeStamp,Type,Name,URL\n"; 8 | const annotations = this.session.getAnnotations(); 9 | 10 | for (let i = 0; i < annotations.length; i++) { 11 | const annotation = annotations[i]; 12 | const timeStamp = annotation.getTimeStamp().toString('dd-MM-yyyy HH:mm'); 13 | const type = annotation.getType(); 14 | const name = annotation.getName(); 15 | const url = annotation.getURL(); 16 | 17 | csvData += `${timeStamp},${type},${name},${url}\n`; 18 | } 19 | 20 | return csvData; 21 | } 22 | 23 | downloadCSVFile() { 24 | var pom = document.createElement('a'); 25 | var csvContent = this.getCSVData(); //here we load our csv data 26 | var blob = new Blob([csvContent], { 27 | type: 'text/csv;charset=utf-8;' 28 | }); 29 | var url = URL.createObjectURL(blob); 30 | pom.href = url; 31 | pom.setAttribute('download', 'foo.csv'); 32 | pom.click(); 33 | } 34 | } -------------------------------------------------------------------------------- /src/JSonSessionService.js: -------------------------------------------------------------------------------- 1 | import { Bug, Note, Idea, Question } from './Annotation.js'; 2 | import { Session } from './Session.js'; 3 | 4 | export class JSonSessionService { 5 | getJSon(session) { 6 | return JSON.stringify(session); 7 | } 8 | 9 | getSession(jsonString) { 10 | const object = JSON.parse(jsonString); 11 | const annotations = []; 12 | 13 | const tempAnnotations = object.annotations; 14 | if (tempAnnotations.length != 0) { 15 | for (let i = 0; i < tempAnnotations.length; i++) { 16 | const ann = tempAnnotations[i]; 17 | annotations.push(this.getAnnotaionFromType(ann)); 18 | } 19 | } 20 | const sessionDate = new Date(object.StartDateTime); 21 | const session = new Session(sessionDate, object.BrowserInfo); 22 | session.setAnnotations(annotations); 23 | return session; 24 | } 25 | 26 | getAnnotaionFromType(annotation) { 27 | const name = annotation.name; 28 | const url = annotation.url; 29 | const timestamp = new Date(annotation.timestamp); 30 | const image = annotation.imageURL; 31 | 32 | if (annotation.type == "Bug") return new Bug(name, url, timestamp, image); 33 | if (annotation.type == "Note") return new Note(name, url, timestamp, image); 34 | if (annotation.type == "Idea") return new Idea(name, url, timestamp, image); 35 | if (annotation.type == "Question") return new Question(name, url, timestamp, image); 36 | } 37 | } -------------------------------------------------------------------------------- /src/Session.js: -------------------------------------------------------------------------------- 1 | import { Bug, Note, Idea, Question } from './Annotation.js'; 2 | import { getSystemInfo } from './browserInfo.js'; 3 | 4 | export class Session { 5 | constructor(dateTime, browserInfo) { 6 | // Check if provided browserInfo is sufficiently complete 7 | if (browserInfo && typeof browserInfo.browser === 'string' && browserInfo.browser !== '' && 8 | typeof browserInfo.browserVersion === 'string' && browserInfo.browserVersion !== '' && 9 | typeof browserInfo.os === 'string' && browserInfo.os !== '') { 10 | this.BrowserInfo = browserInfo; 11 | } else { 12 | // If browserInfo is missing, null, undefined, or incomplete, get current system info 13 | this.BrowserInfo = getSystemInfo(); 14 | } 15 | this.StartDateTime = dateTime || Date.now(); // Provide a fallback for dateTime 16 | this.annotations = []; 17 | } 18 | 19 | getBrowserInfo() { 20 | return this.BrowserInfo; 21 | } 22 | 23 | getStartDateTime() { 24 | return new Date(this.StartDateTime); 25 | } 26 | 27 | clearAnnotations() { 28 | this.annotations = []; 29 | } 30 | 31 | setAnnotations(newAnnotations) { 32 | this.annotations = newAnnotations; 33 | } 34 | 35 | deleteAnnotation(annotationID) { 36 | if (annotationID > -1) { 37 | this.annotations.splice(annotationID, 1); 38 | } 39 | } 40 | 41 | getAnnotations() { 42 | return this.annotations; 43 | } 44 | 45 | getBugs() { 46 | return this.annotations.filter(item => item instanceof Bug); 47 | } 48 | 49 | getNotes() { 50 | return this.annotations.filter(item => item instanceof Note); 51 | } 52 | 53 | getIdeas() { 54 | return this.annotations.filter(item => item instanceof Idea); 55 | } 56 | 57 | getQuestions() { 58 | return this.annotations.filter(item => item instanceof Question); 59 | } 60 | 61 | addBug(newBug) { 62 | this.annotations.push(newBug); 63 | } 64 | 65 | addIdea(newIdea) { 66 | this.annotations.push(newIdea); 67 | } 68 | 69 | addNote(newNote) { 70 | this.annotations.push(newNote); 71 | } 72 | 73 | addQuestion(newQuestion) { 74 | this.annotations.push(newQuestion); 75 | } 76 | } -------------------------------------------------------------------------------- /src/browserInfo.js: -------------------------------------------------------------------------------- 1 | export function getSystemInfo() { 2 | return { 3 | browser: "Chrome", 4 | browserVersion: chrome.runtime.getManifest().version, 5 | os: navigator.platform, 6 | osVersion: navigator.userAgent, 7 | cookies: navigator.cookieEnabled, 8 | flashVersion: "N/A" // Flash ya no se usa en navegadores modernos 9 | }; 10 | } -------------------------------------------------------------------------------- /start_test_server.ps1: -------------------------------------------------------------------------------- 1 | # Verificar si Python está instalado 2 | $pythonVersion = python --version 2>&1 3 | if ($LASTEXITCODE -ne 0) { 4 | Write-Host "Python no está instalado. Por favor, instala Python desde https://www.python.org/downloads/" 5 | exit 1 6 | } 7 | 8 | # Iniciar el servidor HTTP 9 | Write-Host "Iniciando servidor de pruebas en http://localhost:8000" 10 | Write-Host "Abre http://localhost:8000/test/SpecRunner.html en tu navegador" 11 | Write-Host "Presiona Ctrl+C para detener el servidor" 12 | python -m http.server 8000 -------------------------------------------------------------------------------- /test/spec/Annotation.test.js: -------------------------------------------------------------------------------- 1 | import { Annotation, Bug, Idea, Note, Question } from '../../src/Annotation'; 2 | 3 | describe('Annotation Classes', function () { 4 | let testName = "Test Annotation"; 5 | let testUrl = "http://test.com"; 6 | let testTimestamp = new Date().getTime(); 7 | let testImageUrl = "http://test.com/image.jpg"; 8 | 9 | describe('Base Annotation Class', function () { 10 | let annotation; 11 | 12 | beforeEach(function () { 13 | annotation = new Annotation(testName, testUrl, testTimestamp, testImageUrl); 14 | }); 15 | 16 | it('should create an annotation with correct properties', function () { 17 | expect(annotation.getName()).toBe(testName); 18 | expect(annotation.getURL()).toBe(testUrl); 19 | expect(annotation.getTimeStamp().getTime()).toBe(testTimestamp); 20 | expect(annotation.getImageURL()).toBe(testImageUrl); 21 | }); 22 | 23 | it('should allow changing the name', function () { 24 | const newName = "New Name"; 25 | annotation.setName(newName); 26 | expect(annotation.getName()).toBe(newName); 27 | }); 28 | 29 | it('should allow changing the image URL', function () { 30 | const newImageUrl = "http://test.com/new-image.jpg"; 31 | annotation.setImageURL(newImageUrl); 32 | expect(annotation.getImageURL()).toBe(newImageUrl); 33 | }); 34 | }); 35 | 36 | describe('Bug Class', function () { 37 | let bug; 38 | 39 | beforeEach(function () { 40 | bug = new Bug(testName, testUrl, testTimestamp, testImageUrl); 41 | }); 42 | 43 | it('should create a bug with correct type', function () { 44 | expect(bug.getType()).toBe("Bug"); 45 | }); 46 | 47 | it('should inherit from Annotation', function () { 48 | expect(bug instanceof Annotation).toBe(true); 49 | }); 50 | }); 51 | 52 | describe('Idea Class', function () { 53 | let idea; 54 | 55 | beforeEach(function () { 56 | idea = new Idea(testName, testUrl, testTimestamp, testImageUrl); 57 | }); 58 | 59 | it('should create an idea with correct type', function () { 60 | expect(idea.getType()).toBe("Idea"); 61 | }); 62 | 63 | it('should inherit from Annotation', function () { 64 | expect(idea instanceof Annotation).toBe(true); 65 | }); 66 | }); 67 | 68 | describe('Note Class', function () { 69 | let note; 70 | 71 | beforeEach(function () { 72 | note = new Note(testName, testUrl, testTimestamp, testImageUrl); 73 | }); 74 | 75 | it('should create a note with correct type', function () { 76 | expect(note.getType()).toBe("Note"); 77 | }); 78 | 79 | it('should inherit from Annotation', function () { 80 | expect(note instanceof Annotation).toBe(true); 81 | }); 82 | }); 83 | 84 | describe('Question Class', function () { 85 | let question; 86 | 87 | beforeEach(function () { 88 | question = new Question(testName, testUrl, testTimestamp, testImageUrl); 89 | }); 90 | 91 | it('should create a question with correct type', function () { 92 | expect(question.getType()).toBe("Question"); 93 | }); 94 | 95 | it('should inherit from Annotation', function () { 96 | expect(question instanceof Annotation).toBe(true); 97 | }); 98 | }); 99 | }); -------------------------------------------------------------------------------- /test/spec/ExportSessionCSV.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | import { ExportSessionCSV } from '../../src/ExportSessionCSV'; 6 | import { Session } from '../../src/Session'; 7 | import { Bug, Idea, Note, Question } from '../../src/Annotation'; 8 | 9 | describe("Export Session to CSV", function () { 10 | 11 | describe("export data to CSV", function () { 12 | it("should export all annotations to CSV", function () { // Typo "shloud" corrected 13 | 14 | var BrowserInfo = "TestBrowser 10.0.1.3"; 15 | var currentDateTime = new Date(2015, 10, 30, 6, 51); // Month 10 is November 16 | // Removed duplicated line currentDateTime 17 | 18 | var session = new Session(currentDateTime, BrowserInfo); 19 | 20 | // Month 9 is October for annotations 21 | session.addBug(new Bug("Add Bug", "http://TestSite/bugUrl.com", new Date(2015, 9, 30, 8, 0, 0))); 22 | session.addIdea(new Idea("Add Idea", "http://TestSite/IdeaUrl.com", new Date(2015, 9, 30, 8, 5, 0))); 23 | session.addNote(new Note("Add Note", "http://TestSite/NoteUrl.com", new Date(2015, 9, 30, 8, 10, 0))); 24 | session.addQuestion(new Question("Add Question", "http://TestSite/QuestionUrl.com", new Date(2015, 9, 30, 8, 15, 0))); 25 | 26 | var expectedCSV = "TimeStamp,Type,Name,URL\n" + 27 | "30-10-2015 08:00,Bug,Add Bug,http://TestSite/bugUrl.com\n" + 28 | "30-10-2015 08:05,Idea,Add Idea,http://TestSite/IdeaUrl.com\n" + 29 | "30-10-2015 08:10,Note,Add Note,http://TestSite/NoteUrl.com\n" + 30 | "30-10-2015 08:15,Question,Add Question,http://TestSite/QuestionUrl.com\n"; 31 | 32 | var actualCSV = new ExportSessionCSV(session).getCSVData(); 33 | 34 | expect(actualCSV).toEqual(expectedCSV); // Standard order: actual, expected 35 | }); 36 | }); 37 | }); 38 | 39 | describe('ExportSessionCSV', function () { 40 | let exportCSV; 41 | let testSession; 42 | let testBug; 43 | let testNote; 44 | 45 | beforeEach(function () { 46 | testSession = new Session(new Date(), "Chrome"); 47 | 48 | // Crear anotaciones de prueba 49 | testBug = new Bug("Test Bug", "http://test.com", new Date().getTime(), "http://test.com/bug.jpg"); 50 | testNote = new Note("Test Note", "http://test.com", new Date().getTime(), "http://test.com/note.jpg"); 51 | 52 | testSession.addBug(testBug); 53 | testSession.addNote(testNote); 54 | 55 | exportCSV = new ExportSessionCSV(testSession); 56 | }); 57 | 58 | describe('getCSVData', function () { 59 | it('should generate correct CSV header', function () { 60 | const csvData = exportCSV.getCSVData(); 61 | expect(csvData.startsWith('TimeStamp,Type,Name,URL\n')).toBe(true); 62 | }); 63 | 64 | it('should include all annotations in CSV', function () { 65 | const csvData = exportCSV.getCSVData(); 66 | const lines = csvData.split('\n'); 67 | 68 | // Header + 2 annotations + empty line at end 69 | expect(lines.length).toBe(4); 70 | 71 | // Verificar que las anotaciones están en el CSV 72 | expect(lines[1]).toContain('Bug'); 73 | expect(lines[1]).toContain('Test Bug'); 74 | expect(lines[1]).toContain('http://test.com'); 75 | 76 | expect(lines[2]).toContain('Note'); 77 | expect(lines[2]).toContain('Test Note'); 78 | expect(lines[2]).toContain('http://test.com'); 79 | }); 80 | 81 | it('should handle empty session', function () { 82 | const emptySession = new Session(new Date(), "Chrome"); 83 | const emptyExportCSV = new ExportSessionCSV(emptySession); 84 | const csvData = emptyExportCSV.getCSVData(); 85 | 86 | expect(csvData).toBe('TimeStamp,Type,Name,URL\n'); 87 | }); 88 | }); 89 | 90 | describe('downloadCSVFile', function () { 91 | beforeEach(() => { 92 | // Store original URL if it exists 93 | originalURL = global.URL; 94 | 95 | // Mock URL.createObjectURL 96 | global.URL = { 97 | ...originalURL, // Keep any existing properties 98 | createObjectURL: jest.fn().mockReturnValue('mock-url') 99 | }; 100 | }); 101 | 102 | afterEach(() => { 103 | // Restore original URL 104 | global.URL = originalURL; 105 | }); 106 | 107 | it('should create a download link', function () { 108 | // Create mock DOM element 109 | const mockLink = { 110 | href: '', 111 | download: '', 112 | click: jest.fn(), 113 | setAttribute: jest.fn(function (name, value) { 114 | this[name] = value; 115 | }) 116 | }; 117 | 118 | // Make sure document exists before using spyOn 119 | expect(document).toBeDefined(); 120 | 121 | // Now spy on document.createElement 122 | jest.spyOn(document, 'createElement').mockReturnValue(mockLink); 123 | 124 | exportCSV.downloadCSVFile(); 125 | 126 | // Verify URL.createObjectURL was called 127 | expect(URL.createObjectURL).toHaveBeenCalled(); 128 | 129 | // Rest of your assertions... 130 | expect(document.createElement).toHaveBeenCalledWith('a'); 131 | expect(mockLink.href).toBe('mock-url'); 132 | expect(mockLink.setAttribute).toHaveBeenCalledWith('download', 'foo.csv'); 133 | expect(mockLink.click).toHaveBeenCalled(); 134 | }); 135 | }); 136 | describe('ExportSessionCSV with empty session', function () { 137 | let exportCSV; 138 | let emptySession; 139 | 140 | beforeEach(function () { 141 | emptySession = new Session(new Date(), "Chrome"); 142 | exportCSV = new ExportSessionCSV(emptySession); 143 | }); 144 | 145 | it('should handle empty session gracefully', function () { 146 | const csvData = exportCSV.getCSVData(); 147 | expect(csvData).toBe('TimeStamp,Type,Name,URL\n'); 148 | }); 149 | }); 150 | }); 151 | 152 | -------------------------------------------------------------------------------- /test/spec/JSonSessionService.test.js: -------------------------------------------------------------------------------- 1 | import { JSonSessionService } from '../../src/JSonSessionService'; 2 | import { Session } from '../../src/Session'; 3 | import { Bug, Idea, Note, Question } from '../../src/Annotation'; 4 | 5 | describe("Manage Session with Json format", function () { 6 | describe("export session to Json", function () { 7 | it("should export every session data to JSon format", function () { 8 | var BrowserInfo = "TestBrowser 10.0.1.3"; 9 | var currentDateTime = new Date(2015, 10, 30, 6, 51); // Assuming this creates a date in local TZ 10 | 11 | var session = new Session(currentDateTime, BrowserInfo); 12 | 13 | // These will also be local TZ, then toJSON converts to UTC 14 | session.addBug(new Bug("Add Bug", "http://TestSite/bugUrl.com", new Date(2015, 9, 30, 8, 0, 0))); // Month is 0-indexed for Date constructor 15 | session.addIdea(new Idea("Add Idea", "http://TestSite/IdeaUrl.com", new Date(2015, 9, 30, 8, 5, 0))); 16 | session.addNote(new Note("Add Note", "http://TestSite/NoteUrl.com", new Date(2015, 9, 30, 8, 10, 0))); 17 | session.addQuestion(new Question("Add Question", "http://TestSite/QuestionUrl.com", new Date(2015, 9, 30, 8, 15, 0))); 18 | 19 | // Expected JSON should match the toJSON() output from the above Date objects 20 | // Based on the previous test run, the dates are serialized with an offset. 21 | // If currentDateTime = new Date(2015, 10, 30, 6, 51) becomes "2015-11-30T06:51:00.000Z" 22 | // and new Date(2015, 9, 30, 8, 0, 0) becomes "2015-10-30T08:00:00.000Z" 23 | var parsedExpected = JSON.parse(`{ 24 | "BrowserInfo": "TestBrowser 10.0.1.3", 25 | "StartDateTime": "${new Date(2015, 10, 30, 6, 51).toJSON()}", 26 | "annotations": [ 27 | { 28 | "type": "Bug", 29 | "name": "Add Bug", 30 | "url": "http://TestSite/bugUrl.com", 31 | "timestamp": "${new Date(2015, 9, 30, 8, 0, 0).toJSON()}" 32 | }, 33 | { 34 | "type": "Idea", 35 | "name": "Add Idea", 36 | "url": "http://TestSite/IdeaUrl.com", 37 | "timestamp": "${new Date(2015, 9, 30, 8, 5, 0).toJSON()}" 38 | }, 39 | { 40 | "type": "Note", 41 | "name": "Add Note", 42 | "url": "http://TestSite/NoteUrl.com", 43 | "timestamp": "${new Date(2015, 9, 30, 8, 10, 0).toJSON()}" 44 | }, 45 | { 46 | "type": "Question", 47 | "name": "Add Question", 48 | "url": "http://TestSite/QuestionUrl.com", 49 | "timestamp": "${new Date(2015, 9, 30, 8, 15, 0).toJSON()}" 50 | } 51 | ] 52 | }`); 53 | 54 | var JSONService = new JSonSessionService(); 55 | var actualJson = JSONService.getJSon(session); 56 | 57 | var parsedActual = JSON.parse(actualJson); 58 | 59 | // Comparar los objetos JavaScript en lugar de los strings JSON 60 | expect(parsedActual).toEqual(parsedExpected); 61 | }); 62 | 63 | it("should export session with no annotations", function () { 64 | var BrowserInfo = "TestBrowser 10.0.1.3"; 65 | var currentDateTime = new Date(2015, 10, 30, 6, 51); 66 | 67 | var session = new Session(currentDateTime, BrowserInfo); 68 | // Expected JSON should match the toJSON() output from currentDateTime 69 | var expectedJSon = `{"BrowserInfo":"TestBrowser 10.0.1.3","StartDateTime":"${currentDateTime.toJSON()}","annotations":[]}` 70 | var JSONService = new JSonSessionService(); 71 | var actualJson = JSONService.getJSon(session); 72 | 73 | expect(actualJson).toEqual(expectedJSon); // Swapped actual and expected to match Jest's typical order, and compare JSON strings 74 | }); 75 | }); 76 | describe("import session from Json", function () { 77 | it("should create a session object from json with no annotations", function () { 78 | const testDate = new Date(2015, 10, 30, 6, 51); 79 | const testDateJSON = testDate.toJSON(); 80 | var JSonString = `{"BrowserInfo":"TestBrowser 10.0.1.3","StartDateTime":"${testDateJSON}","annotations":[]}`; 81 | 82 | var BrowserInfo = "TestBrowser 10.0.1.3"; 83 | // For expectedSession, use the exact same date object that generated the JSON string to ensure consistency 84 | var expectedSession = new Session(new Date(testDateJSON), BrowserInfo); 85 | 86 | var JSONService = new JSonSessionService(); 87 | var actualSession = JSONService.getSession(JSonString); 88 | 89 | // Compare the toJSON strings of dates, or getTime() values for robust comparison 90 | expect(actualSession.getStartDateTime().getTime()).toEqual(expectedSession.getStartDateTime().getTime()); 91 | expect(actualSession.getBrowserInfo()).toEqual(expectedSession.getBrowserInfo()); 92 | expect(actualSession.getAnnotations()).toEqual(expectedSession.getAnnotations()); 93 | }); 94 | it("should create a session object from json with many annotations", function () { 95 | const sessionStartDate = new Date(2015, 10, 30, 6, 51); 96 | const bugDate = new Date(2015, 9, 30, 8, 0, 0); 97 | const ideaDate = new Date(2015, 9, 30, 8, 5, 0); 98 | const noteDate = new Date(2015, 9, 30, 8, 10, 0); 99 | const questionDate = new Date(2015, 9, 30, 8, 15, 0); 100 | 101 | // El JSON de entrada parseado 102 | var JSonString = `{ 103 | "BrowserInfo": "TestBrowser 10.0.1.3", 104 | "StartDateTime": "${sessionStartDate.toJSON()}", 105 | "annotations": [ 106 | { 107 | "type": "Bug", 108 | "name": "Add Bug", 109 | "url": "http://TestSite/bugUrl.com", 110 | "timestamp": "${bugDate.toJSON()}" 111 | }, 112 | { 113 | "type": "Idea", 114 | "name": "Add Idea", 115 | "url": "http://TestSite/IdeaUrl.com", 116 | "timestamp": "${ideaDate.toJSON()}" 117 | }, 118 | { 119 | "type": "Note", 120 | "name": "Add Note", 121 | "url": "http://TestSite/NoteUrl.com", 122 | "timestamp": "${noteDate.toJSON()}" 123 | }, 124 | { 125 | "type": "Question", 126 | "name": "Add Question", 127 | "url": "http://TestSite/QuestionUrl.com", 128 | "timestamp": "${questionDate.toJSON()}" 129 | } 130 | ] 131 | }`; 132 | 133 | var BrowserInfo = "TestBrowser 10.0.1.3"; 134 | // Use the .toJSON() string for constructing dates for expectedSession to ensure they are parsed identically 135 | var expectedSession = new Session(new Date(sessionStartDate.toJSON()), BrowserInfo); 136 | expectedSession.addBug(new Bug("Add Bug", "http://TestSite/bugUrl.com", new Date(bugDate.toJSON()))); 137 | expectedSession.addIdea(new Idea("Add Idea", "http://TestSite/IdeaUrl.com", new Date(ideaDate.toJSON()))); 138 | expectedSession.addNote(new Note("Add Note", "http://TestSite/NoteUrl.com", new Date(noteDate.toJSON()))); 139 | expectedSession.addQuestion(new Question("Add Question", "http://TestSite/QuestionUrl.com", new Date(questionDate.toJSON()))); 140 | 141 | var JSONService = new JSonSessionService(); 142 | var actualSession = JSONService.getSession(JSonString); 143 | 144 | // En lugar de comparar directamente los objetos Session, creamos representaciones JSON de ambos y los comparamos 145 | var actualSessionJson = JSON.stringify(actualSession); 146 | var expectedSessionJson = JSON.stringify(expectedSession); 147 | 148 | // Parseamos los JSON para ignorar diferencias de formato 149 | var parsedActual = JSON.parse(actualSessionJson); 150 | var parsedExpected = JSON.parse(expectedSessionJson); 151 | 152 | // Comparamos los objetos parseados 153 | expect(parsedActual).toEqual(parsedExpected); 154 | }); 155 | }); 156 | describe("Exportar and importa sesion", function () { 157 | it("Import an exported session should be consistent", function () { 158 | 159 | var BrowserInfo = "TestBrowser 10.0.1.3"; 160 | var currentDateTime = new Date(2015, 10, 30, 6, 51); // Local time 161 | 162 | var initSession = new Session(currentDateTime, BrowserInfo); 163 | 164 | // Use 0-indexed months for Date constructor 165 | initSession.addBug(new Bug("Add Bug", "http://TestSite/bugUrl.com", new Date(2015, 9, 30, 8, 0, 0))); 166 | initSession.addIdea(new Idea("Add Idea", "http://TestSite/IdeaUrl.com", new Date(2015, 9, 30, 8, 5, 0))); 167 | initSession.addNote(new Note("Add Note", "http://TestSite/NoteUrl.com", new Date(2015, 9, 30, 8, 10, 0))); 168 | initSession.addQuestion(new Question("Add Question", "http://TestSite/QuestionUrl.com", new Date(2015, 9, 30, 8, 15, 0))); 169 | 170 | var JSONService = new JSonSessionService(); 171 | 172 | var newSession = JSONService.getSession(JSONService.getJSon(initSession)); 173 | 174 | expect(initSession).toEqual(newSession); 175 | 176 | }); 177 | }); 178 | 179 | describe('getSession error handling', function() { 180 | let jsonService; 181 | 182 | beforeEach(function() { 183 | jsonService = new JSonSessionService(); 184 | }); 185 | 186 | it('should throw error for invalid JSON string', function() { 187 | const invalidJsonString = "this is not json"; 188 | expect(() => { 189 | jsonService.getSession(invalidJsonString); 190 | }).toThrow(SyntaxError); // JSON.parse throws SyntaxError 191 | }); 192 | 193 | it('should throw an error or return null for JSON not matching session structure (empty object)', function() { 194 | const jsonString = "{}"; 195 | // Depending on implementation, this might throw TypeError if properties are accessed on undefined, 196 | // or it might return a Session object with undefined/default values. 197 | // Current implementation of getSession directly accesses properties like object.StartDateTime. 198 | // If object.StartDateTime is undefined, new Date(undefined) results in an Invalid Date. 199 | // Session constructor might handle this, or it might result in an unexpected session state. 200 | // Let's test for a TypeError or if it creates a session with invalid dates. 201 | expect(() => { 202 | const session = jsonService.getSession(jsonString); 203 | // Further check if session or its properties are valid if no error is thrown 204 | // For example, if StartDateTime is crucial and becomes "Invalid Date" 205 | if (session && session.getStartDateTime() instanceof Date && isNaN(session.getStartDateTime().getTime())) { 206 | throw new Error("Session created with Invalid Date"); 207 | } else if (!session) { 208 | throw new Error("Session is null or undefined"); 209 | } 210 | }).toThrow(); // Broad error check, refine if specific error is known/expected 211 | }); 212 | 213 | it('should throw an error or return null for JSON not matching session structure (empty array)', function() { 214 | const jsonString = "[]"; 215 | // JSON.parse of "[]" results in an array. Accessing .StartDateTime on an array will be undefined. 216 | expect(() => { 217 | const session = jsonService.getSession(jsonString); 218 | if (session && session.getStartDateTime() instanceof Date && isNaN(session.getStartDateTime().getTime())) { 219 | throw new Error("Session created with Invalid Date from array JSON"); 220 | } else if (!session && typeof session !== 'object') { // if it returns something not an object 221 | throw new Error("Session is not an object or is null/undefined"); 222 | } 223 | }).toThrow(); 224 | }); 225 | 226 | it('should throw an error or return null for JSON with unexpected structure', function() { 227 | const jsonString = '{ "foo": "bar" }'; 228 | expect(() => { 229 | const session = jsonService.getSession(jsonString); 230 | if (session && session.getStartDateTime() instanceof Date && isNaN(session.getStartDateTime().getTime())) { 231 | throw new Error("Session created with Invalid Date from custom JSON"); 232 | } else if (!session) { 233 | throw new Error("Session is null or undefined"); 234 | } 235 | }).toThrow(); 236 | }); 237 | }); 238 | }); 239 | 240 | describe('JSonSessionService', function () { 241 | let jsonService; 242 | let testSession; 243 | let testBug; 244 | let testNote; 245 | let testIdea; 246 | let testQuestion; 247 | 248 | beforeEach(function () { 249 | jsonService = new JSonSessionService(); 250 | testSession = new Session(new Date(), "Chrome"); 251 | 252 | // Crear anotaciones de prueba 253 | testBug = new Bug("Test Bug", "http://test.com", new Date().getTime(), "http://test.com/bug.jpg"); 254 | testNote = new Note("Test Note", "http://test.com", new Date().getTime(), "http://test.com/note.jpg"); 255 | testIdea = new Idea("Test Idea", "http://test.com", new Date().getTime(), "http://test.com/idea.jpg"); 256 | testQuestion = new Question("Test Question", "http://test.com", new Date().getTime(), "http://test.com/question.jpg"); 257 | 258 | testSession.addBug(testBug); 259 | testSession.addNote(testNote); 260 | testSession.addIdea(testIdea); 261 | testSession.addQuestion(testQuestion); 262 | }); 263 | 264 | describe('getJSon', function () { 265 | it('should convert session to JSON string', function () { 266 | const jsonString = jsonService.getJSon(testSession); 267 | const parsedJson = JSON.parse(jsonString); 268 | 269 | expect(parsedJson.annotations.length).toBe(4); 270 | expect(parsedJson.BrowserInfo).toBe("Chrome"); 271 | expect(new Date(parsedJson.StartDateTime)).toEqual(testSession.getStartDateTime()); 272 | }); 273 | }); 274 | 275 | describe('getSession', function () { 276 | it('should convert JSON string back to session', function () { 277 | const jsonString = jsonService.getJSon(testSession); 278 | const restoredSession = jsonService.getSession(jsonString); 279 | 280 | expect(restoredSession.getAnnotations().length).toBe(4); 281 | expect(restoredSession.getBrowserInfo()).toBe("Chrome"); 282 | expect(restoredSession.getStartDateTime()).toEqual(testSession.getStartDateTime()); 283 | }); 284 | 285 | it('should handle empty annotations array', function () { 286 | const emptySession = new Session(new Date(), "Chrome"); 287 | const jsonString = jsonService.getJSon(emptySession); 288 | const restoredSession = jsonService.getSession(jsonString); 289 | 290 | expect(restoredSession.getAnnotations().length).toBe(0); 291 | }); 292 | }); 293 | 294 | describe('getAnnotaionFromType', function () { 295 | it('should create correct annotation type from JSON', function () { 296 | const bugJson = { 297 | type: "Bug", 298 | name: "Test Bug", 299 | url: "http://test.com", 300 | timestamp: new Date().getTime(), 301 | imageURL: "http://test.com/bug.jpg" 302 | }; 303 | 304 | const noteJson = { 305 | type: "Note", 306 | name: "Test Note", 307 | url: "http://test.com", 308 | timestamp: new Date().getTime(), 309 | imageURL: "http://test.com/note.jpg" 310 | }; 311 | 312 | const ideaJson = { 313 | type: "Idea", 314 | name: "Test Idea", 315 | url: "http://test.com", 316 | timestamp: new Date().getTime(), 317 | imageURL: "http://test.com/idea.jpg" 318 | }; 319 | 320 | const questionJson = { 321 | type: "Question", 322 | name: "Test Question", 323 | url: "http://test.com", 324 | timestamp: new Date().getTime(), 325 | imageURL: "http://test.com/question.jpg" 326 | }; 327 | 328 | expect(jsonService.getAnnotaionFromType(bugJson) instanceof Bug).toBe(true); 329 | expect(jsonService.getAnnotaionFromType(noteJson) instanceof Note).toBe(true); 330 | expect(jsonService.getAnnotaionFromType(ideaJson) instanceof Idea).toBe(true); 331 | expect(jsonService.getAnnotaionFromType(questionJson) instanceof Question).toBe(true); 332 | }); 333 | }); 334 | }); -------------------------------------------------------------------------------- /test/spec/Session.test.js: -------------------------------------------------------------------------------- 1 | import { Session } from '../../src/Session'; 2 | import { Bug, Idea, Note, Question } from '../../src/Annotation'; 3 | 4 | describe("Exploratory Session", function () { 5 | 6 | describe("when Session starts", function () { 7 | it("should store sarting DateTime and Browser Info", function () { 8 | 9 | var browserName = "TestBrowser"; 10 | var browserVersion = "0.987.1"; 11 | var os = "Test Os"; 12 | var osVersion = "1.2.3"; 13 | var cookiesEnabled = true; 14 | var flashVersion = "flash 21"; 15 | 16 | var BrowserInfo = { 17 | browser: browserName, 18 | browserVersion: browserVersion, 19 | os: os, 20 | osVersion: osVersion, 21 | cookies: cookiesEnabled, 22 | flashVersion: flashVersion 23 | }; 24 | var currentDateTime = new Date(2015, 10, 30, 6, 51); 25 | 26 | var session = new Session(currentDateTime, BrowserInfo); 27 | 28 | expect(session.getBrowserInfo().browser).toEqual(browserName); 29 | expect(session.getBrowserInfo().os).toEqual(os); 30 | expect(session.getBrowserInfo().osVersion).toEqual(osVersion); 31 | expect(session.getStartDateTime()).toEqual(currentDateTime); 32 | }); 33 | 34 | 35 | }); 36 | 37 | describe("should manage annotations: bugs, ideas, questions and notes", function () { 38 | 39 | var session; 40 | var browserName = "TestBrowser"; 41 | var browserVersion = "0.987.1"; 42 | var os = "Test Os"; 43 | var osVersion = "1.2.3"; 44 | var cookiesEnabled = true; 45 | var flashVersion = "flash 21"; 46 | 47 | var BrowserInfo = { 48 | browser: browserName, 49 | browserVersion: browserVersion, 50 | os: os, 51 | osVersion: osVersion, 52 | cookies: cookiesEnabled, 53 | flashVersion: flashVersion 54 | }; 55 | 56 | beforeEach(function () { 57 | var BrowserInfo = "TestBrowser 10.0.1.3"; 58 | var currentDateTime = new Date(2015, 10, 30, 6, 51); 59 | 60 | session = new Session(currentDateTime, BrowserInfo); 61 | }); 62 | 63 | it("annotations should be empty at the begining", function () { 64 | var annotations = session.getAnnotations(); 65 | 66 | expect(annotations.length).toEqual(0); 67 | }); 68 | 69 | it("when a bug is added there is one more annotation", function () { 70 | var bugName = "Add a new bug test"; 71 | var url = "http://myTestPage.com" 72 | 73 | var newBug = new Bug(bugName, url); 74 | 75 | session.addBug(newBug); 76 | 77 | var annotations = session.getAnnotations(); 78 | 79 | expect(annotations.length).toEqual(1); 80 | 81 | //Check that is the bug just inserted 82 | expect(annotations[0].getName()).toEqual(bugName); 83 | expect(annotations[0].getURL()).toEqual(url); 84 | 85 | }); 86 | 87 | it("when a idea is added there is one more annotation", function () { 88 | var ideaName = "Add a new idea test"; 89 | var url = "http://myTestPage.com" 90 | 91 | var newIdea = new Idea(ideaName, url); 92 | 93 | session.addIdea(newIdea); 94 | 95 | var annotations = session.getAnnotations(); 96 | 97 | expect(annotations.length).toEqual(1); 98 | 99 | //Check that is the idea just inserted 100 | expect(annotations[0].getName()).toEqual(ideaName); 101 | expect(annotations[0].getURL()).toEqual(url); 102 | 103 | }); 104 | 105 | it("when a note is added there is one more annotation", function () { 106 | var noteName = "Add a new note test"; 107 | var url = "http://myTestPage.com" 108 | 109 | var newNote = new Note(noteName, url); 110 | 111 | session.addNote(newNote); 112 | 113 | var annotations = session.getAnnotations(); 114 | 115 | expect(annotations.length).toEqual(1); 116 | 117 | //Check that is the Note just inserted 118 | expect(annotations[0].getName()).toEqual(noteName); 119 | expect(annotations[0].getURL()).toEqual(url); 120 | 121 | }); 122 | 123 | it("when a question is added there is one more annotation", function () { 124 | var questionName = "Add a new question test"; 125 | var url = "http://myTestPage.com" 126 | 127 | var newQuestion = new Question(questionName, url); 128 | 129 | session.addQuestion(newQuestion); 130 | 131 | var annotations = session.getAnnotations(); 132 | 133 | expect(annotations.length).toEqual(1); 134 | 135 | //Check that is the question just inserted 136 | expect(annotations[0].getName()).toEqual(questionName); 137 | expect(annotations[0].getURL()).toEqual(url); 138 | 139 | }); 140 | 141 | it("different types of annotations can be added", function () { 142 | 143 | session.addBug(new Bug("Add Bug")); 144 | session.addIdea(new Idea("Aded Idea")); 145 | session.addNote(new Note("Add Note")); 146 | session.addQuestion(new Question("Add Question")); 147 | 148 | var annotations = session.getAnnotations(); 149 | 150 | expect(annotations.length).toEqual(4); 151 | 152 | //Check inserted types order 153 | expect(annotations[0] instanceof Bug).toBeTruthy(); 154 | expect(annotations[1] instanceof Idea).toBeTruthy(); 155 | expect(annotations[2] instanceof Note).toBeTruthy(); 156 | expect(annotations[3] instanceof Question).toBeTruthy(); 157 | 158 | }); 159 | 160 | it("retrieve annotations by type", function () { 161 | 162 | session.addBug(new Bug("Add Bug")); 163 | session.addIdea(new Idea("Aded Idea")); 164 | session.addNote(new Note("Add Note")); 165 | session.addBug(new Bug("Add Bug2")); 166 | //session.addQuestion(new Question("Add Question")); 167 | session.addNote(new Note("Add Note2")); 168 | session.addBug(new Bug("Add Bug3")); 169 | 170 | var bugs = session.getBugs(); 171 | var notes = session.getNotes(); 172 | var ideas = session.getIdeas(); 173 | var questions = session.getQuestions(); 174 | 175 | expect(bugs.length).toEqual(3); 176 | expect(notes.length).toEqual(2); 177 | expect(ideas.length).toEqual(1); 178 | expect(questions.length).toEqual(0); 179 | 180 | }); 181 | 182 | it("should change any annotaion description", function () { 183 | session.addBug(new Bug("Add Bug")); 184 | session.addIdea(new Idea("Aded Idea")); 185 | session.addNote(new Note("Add Note")); 186 | session.addBug(new Bug("Add Bug2")); 187 | session.addNote(new Note("Add Note2")); 188 | session.addBug(new Bug("Add Bug3")); 189 | session.addQuestion(new Question("Add Question")); 190 | 191 | var annotations = session.getAnnotations(); 192 | expect(annotations.length).toEqual(7); 193 | 194 | var newBugName = "new bug name"; 195 | var newIdeaName = "new idea name"; 196 | var newNoteName = "new note name"; 197 | var newQuestionName = "new question name"; 198 | 199 | annotations[0].setName(newBugName); 200 | annotations[1].setName(newIdeaName); 201 | annotations[2].setName(newNoteName); 202 | annotations[6].setName(newQuestionName); 203 | 204 | expect(annotations.length).toEqual(7); 205 | 206 | expect(annotations[0].getName()).toEqual(newBugName); 207 | expect(annotations[1].getName()).toEqual(newIdeaName); 208 | expect(annotations[2].getName()).toEqual(newNoteName); 209 | expect(annotations[6].getName()).toEqual(newQuestionName); 210 | 211 | 212 | }); 213 | 214 | it("session annotaitons can be deleted", function () { 215 | 216 | session.addBug(new Bug("Add Bug")); 217 | session.addIdea(new Idea("Add Idea")); 218 | session.addNote(new Note("Add Note")); 219 | session.addQuestion(new Question("Add Question")); 220 | 221 | var annotations = session.getAnnotations(); 222 | 223 | expect(annotations.length).toEqual(4); 224 | 225 | session.deleteAnnotation(1); 226 | 227 | annotations = session.getAnnotations(); 228 | 229 | expect(annotations.length).toEqual(3); 230 | 231 | expect(annotations[0].getName()).toEqual("Add Bug"); 232 | expect(annotations[1].getName()).toEqual("Add Note"); 233 | expect(annotations[2].getName()).toEqual("Add Question"); 234 | 235 | 236 | }); 237 | 238 | }); 239 | 240 | describe('deleteAnnotation edge cases', function() { 241 | let session; 242 | 243 | beforeEach(function() { 244 | // For these tests, session starts with a few annotations 245 | session = new Session(new Date(), "TestBrowser"); 246 | session.addBug(new Bug("Bug 1", "url1")); 247 | session.addNote(new Note("Note 1", "url2")); 248 | session.addIdea(new Idea("Idea 1", "url3")); // Session now has 3 annotations 249 | }); 250 | 251 | it('should not change annotations if index is -1', function() { 252 | const initialAnnotations = [...session.getAnnotations()]; 253 | session.deleteAnnotation(-1); 254 | expect(session.getAnnotations()).toEqual(initialAnnotations); 255 | }); 256 | 257 | it('should not change annotations if index is equal to annotations length', function() { 258 | const initialAnnotations = [...session.getAnnotations()]; 259 | session.deleteAnnotation(initialAnnotations.length); 260 | expect(session.getAnnotations()).toEqual(initialAnnotations); 261 | }); 262 | 263 | it('should not change annotations if index is greater than annotations length', function() { 264 | const initialAnnotations = [...session.getAnnotations()]; 265 | session.deleteAnnotation(initialAnnotations.length + 1); 266 | expect(session.getAnnotations()).toEqual(initialAnnotations); 267 | }); 268 | 269 | it('should not throw an error or change annotations if list is empty and delete is attempted', function() { 270 | const emptySession = new Session(new Date(), "EmptyBrowser"); 271 | expect(emptySession.getAnnotations().length).toBe(0); 272 | 273 | expect(() => { 274 | emptySession.deleteAnnotation(0); 275 | }).not.toThrow(); 276 | expect(emptySession.getAnnotations().length).toBe(0); 277 | 278 | expect(() => { 279 | emptySession.deleteAnnotation(-1); 280 | }).not.toThrow(); 281 | expect(emptySession.getAnnotations().length).toBe(0); 282 | }); 283 | }); 284 | }); -------------------------------------------------------------------------------- /test/spec/browserInfo.test.js: -------------------------------------------------------------------------------- 1 | import { getSystemInfo } from '../../src/browserInfo'; 2 | 3 | describe('getSystemInfo', () => { 4 | let systemInfo; 5 | 6 | beforeAll(() => { 7 | // getSystemInfo relies on global mocks set in jest.setup.js 8 | // We can call it once if the global mocks are static for these tests 9 | systemInfo = getSystemInfo(); 10 | }); 11 | 12 | it('should return an object', () => { 13 | expect(typeof systemInfo).toBe('object'); 14 | expect(systemInfo).not.toBeNull(); 15 | }); 16 | 17 | it('should contain all expected keys', () => { 18 | expect(systemInfo).toHaveProperty('browser'); 19 | expect(systemInfo).toHaveProperty('browserVersion'); 20 | expect(systemInfo).toHaveProperty('os'); 21 | expect(systemInfo).toHaveProperty('osVersion'); 22 | expect(systemInfo).toHaveProperty('cookies'); 23 | expect(systemInfo).toHaveProperty('flashVersion'); 24 | }); 25 | 26 | it('should retrieve browser name correctly', () => { 27 | expect(systemInfo.browser).toBe('Chrome'); // Hardcoded in function 28 | }); 29 | 30 | it('should retrieve browser version from chrome.runtime.getManifest', () => { 31 | // Assuming jest.setup.js mocks chrome.runtime.getManifest().version to '1.0.0' 32 | expect(systemInfo.browserVersion).toBe('1.0.0'); 33 | }); 34 | 35 | it('should retrieve OS platform from navigator.platform', () => { 36 | // Assuming jest.setup.js mocks navigator.platform to 'TestPlatform' 37 | expect(systemInfo.os).toBe('TestPlatform'); 38 | }); 39 | 40 | it('should retrieve OS version from navigator.userAgent', () => { 41 | // Assuming jest.setup.js mocks navigator.userAgent to 'TestUserAgent/1.0' 42 | // The function extracts this specifically, so the test should reflect that. 43 | // If getSystemInfo is more complex, this might need adjustment. 44 | // For now, assuming it directly uses navigator.userAgent for osVersion. 45 | expect(systemInfo.osVersion).toBe('TestUserAgent/1.0'); 46 | }); 47 | 48 | it('should retrieve cookie status from navigator.cookieEnabled', () => { 49 | // Assuming jest.setup.js mocks navigator.cookieEnabled to true 50 | expect(systemInfo.cookies).toBe(true); 51 | }); 52 | 53 | it('should report Flash version as N/A', () => { 54 | expect(systemInfo.flashVersion).toBe('N/A'); // Hardcoded in function 55 | }); 56 | }); 57 | --------------------------------------------------------------------------------