Attach test screenshot to report_template

[tmznwnel00]

• HtmlTestRunner version: 1.2.1
• Python version: 3.11
• Operating System: Mac

Description

Checking failure point with screenshot image is helpful for everyone.
I want to add screenshot image to the report template.

What I Did

In unittest code, we can save image in two ways.
driver.get_screenshot_as_png() or driver.get_screenshot_as_base64().
Below code is example of getting image as base64.

class TestSample(unittest.TestCase):
    def test_1(self):
        test_code()
    def tearDown(self):
        self.screenshot = self.driver.get_screenshot_as_base64()

In result.py, save screenshot in images dictionary with testMethodName key.

class HtmlTestResult(TextTestResult):
    def stopTest(self, test):
        """ Called after excute each test method. """
        self._save_output_data()
        TextTestResult.stopTest(self, test)
        self.stop_time = time.time()

        if self.callback and callable(self.callback):
            self.callback()
            self.callback = None

        if hasattr(test, 'screenshot'):
            self.images[test._testMethodName] = test.screenshot

In report_template, attach saved screenshot

{%- if (test_case.stdout or test_case.err or test_case.err) and test_case.outcome != test_case.SKIP %}
<tr style="display:none;">
    <td class="col-xs-9" colspan="3">
        {%- set image_key = test_case.test_id.split(".")[-1] %}
        {%- if test_case.stdout %}<p>{{ test_case.stdout }}</p>{% endif %}
        {%- if test_case.err %}<p style="color:maroon;">{{ test_case.err[0].__name__ }}: {{ test_case.err[1] }}</p>{% endif %}
        {%- if test_case.err %}<p style="color:maroon;">{{ test_case.test_exception_info }}</p>{% endif %}
        {%- if test_case.err %}<p style="color:maroon;"><img src="data:image/jpeg;base64, {{ test_case.test_result.images[image_key] }}" alt="failure point" width="1000" height="600"></p>{% endif %}
    </td>
</tr>