[Koha-bugs] [Bug 34076] [ALTERNATE] [DOCS] Automated screenshots using Cypress.io testing framework

Tue Aug 8 00:05:07 CEST 2023

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076

--- Comment #26 from Caroline Cyr La Rose <caroline.cyr-la-rose at inlibro.com> ---
Ok, it took me a lot of trial and error (around 1.5 hours worth), but I got
step 7 done. Look at this gorgeous screenshot! https://snipboard.io/bhyizO.jpg
(lol!!)

I tried making a test from scratch to replicate the screenshots in the
Administration chapter
https://koha-community.org/manual/23.05/en/html/administration.html#libraries

It mostly worked. I ran into some problems.

- For the screenshot showing the library URL in the OPAC
(https://koha-community.org/manual/23.05/en/html/_images/librarylink.png), I
had to create another test because I couldn't find a way to go to the OPAC in
the same test (unless I didn't find the correct way?)

- For the screenshot showing the library link
(https://koha-community.org/manual/23.05/en/html/_images/librarylink.png) I
cannot get the tabs as well as the content. Also, when I clicked around in
Cypress Studio to get the correct html section, I could not find it. I went
into the inspector and clicked around there to find the correct div id and
changed it manually.

- For the screenshots showing the HTML customization
(https://koha-community.org/manual/23.05/en/html/_images/libraryinfo.png and
https://koha-community.org/manual/23.05/en/html/_images/opacinfo.png), Cypress
studio would not save the text I entered in the body of the customization... I
wonder if it's a problem with tiny MCE?

- It's not the end of the world, but I could not take screenshots of partial
forms (i.e.
https://koha-community.org/manual/23.05/en/html/_images/newlibrary.png and
https://koha-community.org/manual/23.05/en/html/_images/librarycontact.png will
be together with automatic screenshots) This will necessitate a bit of
reorganization in the manual.

- It's also not the end of the world, but I always make the screenshots a tiny
bit larger than the div or other html section. For example, this is the
screenshot taken with Cypress https://snipboard.io/jSgRZz.jpg , compared to the
one in the manual
https://koha-community.org/manual/23.05/en/html/_images/librarydetails.png .
Notice the sides are not cut as close to the text as the automatic
screenshot... I find it's not as... aggressive? I don't know how to describe
it, but I find looking at the picture with the tiny bit of space feels calmer.
Might just be me being nitpicky...

This is the total of the tests I did for the 4-5 screenshots. It took me about
2 hours to get these. I'm stuck at the HTML customization one.

describe("Administration", function () {
    beforeEach(() => {
        cy.login();
        cy.set_cookie_lang();
    });

    /* ==== Test Created with Cypress Studio ==== */
    it('librarylist', function() {
        /* ==== Generated with Cypress Studio ==== */
        cy.get(':nth-child(2) > .biglinks-list > :nth-child(6) >
.icon_general').click();
        cy.get(':nth-child(1) > :nth-child(4) > :nth-child(1) > a').click();
        cy.wait_for_ajax();
        cy.get('main').should('be.visible').screenshot("librarylist");
        /* ==== End Cypress Studio ==== */
        /* ==== Generated with Cypress Studio ==== */
        cy.get(':nth-child(7) > .sorting_1 > a').click();
        cy.get('main').should('be.visible').screenshot("librarydetails");
        /* ==== End Cypress Studio ==== */
    });

    /* ==== Test Created with Cypress Studio ==== */
    it('newlibrary', function() {
        /* ==== Generated with Cypress Studio ==== */
        cy.get(':nth-child(2) > .biglinks-list > :nth-child(6) >
.icon_general').click();
        cy.get(':nth-child(1) > :nth-child(4) > :nth-child(1) > a').click();
        cy.get('#newbranch').click();
        cy.get('main').should('be.visible').screenshot("newlibrary");
        /* ==== End Cypress Studio ==== */
    });

    /* ==== Test Created with Cypress Studio ==== */
    it('librarylink', function() {
        /* ==== Generated with Cypress Studio ==== */
        cy.get(':nth-child(2) > .biglinks-list > :nth-child(6) >
.icon_general').click();
        cy.get(':nth-child(1) > :nth-child(4) > :nth-child(1) > a').click();
        cy.get(':nth-child(1) > .actions > a.btn').click();
        cy.get('#branchurl').type('https://www.google.com');
        cy.get('.btn').click();
        /* ==== End Cypress Studio ==== */
    });

    /* ==== Test Created with Cypress Studio ==== */
    it('librarylink2', function() {
        /* ==== Generated with Cypress Studio ==== */

cy.visit('http://kohadev.mydnsname.org:8080/cgi-bin/koha/opac-detail.pl?biblionumber=131');

cy.get('#holdings_panel').should('be.visible').screenshot("librarylink");
        /* ==== End Cypress Studio ==== */
    });

    /* ==== Test Created with Cypress Studio ==== */
    it('libraryinfo1', function() {
        /* ==== Generated with Cypress Studio ==== */
        cy.get(':nth-child(2) > .biglinks-list > :nth-child(5) >
.icon_general').click();
        cy.get(':nth-child(2) > dl > :nth-child(9) > a').click();
        cy.get('#newentry').click();
        cy.get('#location').select('OpacLibraryInfo');
        cy.get('#branchcode').select('CPL');
        cy.get(':nth-child(3) > .flatpickr_wrapper > .flatpickr').click();
        cy.get('.open > .flatpickr-innerContainer > .flatpickr-rContainer >
.flatpickr-days > .dayContainer > [aria-label="August 1, 2023"]').click();
        cy.get('#title_default').type('Closure information');
        cy.get('#submit_form').click();
        /* ==== End Cypress Studio ==== */
    });
});

Other things to think about: 

- I noticed the screenshots generated have the language code before (e.g.
en_librarylist.png). I'm not sure how this will be managed in the manual.
Currently, we refer to an image file in the source/images/ folder. Will there
be a symbolic link (or something) to say librarylist.png in the english manual
is en_librarylist.png, and in the fr-CA manual it is fr-CA_librarylist.png,
etc? If not, how do we manage all the different images?

- How to manage the tests? One per chapter? One per section? One per image? Do
we have a naming convention? We don't really have a naming convention
currently, but it would be good to think about it if we are going to have
thousands of new files to manage. 

We don't need answers for this right away, but it's just things I thought about
while doing it.

-- 
You are receiving this mail because:
You are watching all bug changes.