https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #1 from Jonathan Druart <jonathan.druart+koha@gmail.com> --- I have pushed a branch at https://gitlab.com/joubu/Koha/-/commits/cypress-studio The git log is a bit dirty but at least shows how I reached the current state. Note that this first try (POC) adds code to the Koha repo, but ideally we will certainly want it into its own repo. The idea is to use cypress-studio |1] to let users without development skills generate steps to reach the DOM element to screenshot (either the whole screen or a specific div). However we will then need developers to polish the generated code. So far the remote branch only generates 4 screenshots: prefsearch, searchbar-admin, prevcheckout and allowstafftosetvisibilityforguarantor (they are the names of the images in the manual). On the remote branch you can see "auto" and "manual" commits for those examples. The "auto" are auto-generated by cypress-studio. The "manual" is what needs to be done to make the tests run several times (either restore the state or init it before we run the tests). Eg. for prevcheckout we need to set the syspref to its original value (hardno) or it will already be "hardyes" and the test will fail to set it to "hardyes" The "manual" step also contain the screenshot part. Test plan: 0. Checkout the remote branch % git remote add joubu https://gitlab.com/joubu/Koha/ % git fetch joubu % git checkout -b cypress-studio joubu/cypress-studio 1. start ktd up 2. Run a docker container with the newest version of cypress (Koha is using 9 we want 12) Go to your Koha src directory and run (on your host then): % docker run -it \   -v $PWD:/e2e \   -v /tmp/.X11-unix:/tmp/.X11-unix \   -w /e2e \   -e DISPLAY \   --entrypoint cypress \   --network koha_kohanet \   cypress/included:12.14.0 open --project . If you get "No protocol specified" then run (still on the host) % xhost local:root And try again the 'docker run' command. It should open the cypress UI in a new window. Click "Continue" and you should see: https://snipboard.io/5KawXe.jpg Click "E2E Testing" (that should be with a green 'Configured'). Select the browser you want to try https://snipboard.io/Aynf64.jpg and click "Start E2E Testing in..." It will open a new window with the browser. It will list the different test files (found in t/cypress/integration): https://snipboard.io/Lk19cR.jpg 3. Run the tests Click on Manual/0-language-ui.ts https://snipboard.io/Bd3v4A.jpg The test should be green Click on "Specs" top left to open the side menu Click on 1-sysprefs.ts https://snipboard.io/4iIs2j.jpg Click on the next 2 tests. Are they all green? They should. 4. Admire the screenshots Go to t/cypress/screenshots/ you should see 4 screenshots en_prefsearch.png en_searchbar-admin.png en_prevcheckout.png en_allowstafftosetvisibilityforguarantor.png 5. Generate translated screenshots in ktd: % cd misc/translator/ % perl translate install fr-FR % perl translate install fr-CA % perl translate install es-ES Go to Koha, enable the 3 languages (search for the "language" syspref) Close the Cypress UI (or ctrl-c in the console where you launched it), and now pass --env KOHA_LANG=fr-FR (to use the French template) docker run -it \   -v $PWD:/e2e \   -v /tmp/.X11-unix:/tmp/.X11-unix \   -w /e2e \   -e DISPLAY \   --entrypoint cypress \   --network koha_kohanet \   cypress/included:12.14.0 open --env KOHA_LANG=fr-FR --project . And retry 3. Now you should notice 4 new screenshots, prefixed with "fr-FR_" instead of "en_". They should be showing the French interface. 6. Create a new (easy) test! Here we are! Let's start with an easy one, librarylist: https://koha-community.org/manual/23.05/en/html/_images/librarylist.png So it would be another file, as it's a "library" thing create the following file: `t/cypress/integration/Manual/4-library.ts` With the following content: ``` describe("Libraries", function () {     beforeEach(() => {         cy.login();         cy.set_cookie_lang();     });     it("librarylist", function () {         assert(true);     }); }); ``` Go to the cypress UI (you can use a translated interface or the default/English one) and notice that it detected the new file, click on it. The beforeEach part is only there to login and set the language cookie before each test is run. The "it" block is doing nothing (apart from running a test that will always pass), but it's where we want our steps to be. https://snipboard.io/B4YCrK.jpg Hover your mouse over the "Libraries" line and notice the magic wand icon "Add new test". Tests rerun and you can interact with the UI! Go to Administation > Libraries. Now the goal is to find the correct element we want to screenshot. We want the "New library" button and the library list. Right click and locate the 'main' element (between the button and the "Libraries" title for instance). Click "Add assertion > be visible". Try to make as little "noise" as possible! Every interaction (mouse or keyboard) with the UI will be recorded! However, use the computer like it is your first time: do not use keyboard shortcuts, click on the input before you type, type slowly to make sure everything is recorded, click on the submit button instead of pressing enter, etc. You can remove the unnecessary steps by clicking the "times-circle" icon next to the step. When you are ready click "Save commands", enter a title: "librarylist". Now edit t/cypress/integration/Manual/4-library.ts You should see a new test added, something like:     /* ==== 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.get('main').should('be.visible');         /* ==== End Cypress Studio ==== */     }); Remove the first librarylist 'it' (this is not ideal but I didn't manage to find an easy way to not do it for now). Commit! % git commit -a -m"auto librarylist" Edit it again replace the line         cy.get('main').should('be.visible'); With         cy.get('main').should('be.visible').screenshot("librarylist"); Save. Look at the screenshot! Hey! It was not an easy one (I didn't know I promise!) The screenshot does not show the libraries, because they are fetched in ajax, after the page is loaded. So edit again and add a "wait_for_ajax" call (that is doing what its named says it does): (I removed the comment lines) ```     it('librarylist', function() {         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");     }); ``` Save, look at the screenshot! Now it is showing the library list! Commit! `git commit -a -m"manual librarylist" Do not be afraid, this will be the work for a developer if you are not confident enough with modifying the test file. You can try a really easy one by yourself: https://koha-community.org/manual/23.05/en/html/_images/newlibrary.png There is no trick here! The generated code should be something like:     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('#Aform > :nth-child(1)').should('be.visible');         /* ==== End Cypress Studio ==== */     }); 7. Let's create a new complex test! Yes I know, the previous one was not easy finally, but it was not data dependent. patrondebt - https://koha-community.org/manual/23.05/en/html/_images/patrondebt.png We need to turn on AllowFineOverride, create a manual fine for a patron, and try to check them an item out. So click on "2-checkouts", "Checkouts", magic hand, and use the UI. Try to avoid any unnecessary actions! Try to do it perfectly the first time. Save the commands, run the test: it will fail. Why? Because the pref is now on, and you are trying to turn it on! However you could try your test after a reset_all (with a fresh DB). They should pass in this case, or it means something went wrong when you recorded the tests. No worries, once again it can be the work of a developer to adjust the tests. You should have something like that in 2-checkouts.ts    /* ==== Test Created with Cypress Studio ==== */     it('patrondebt', function() {         /* ==== Generated with Cypress Studio ==== */         cy.get(':nth-child(2) > .biglinks-list > :nth-child(6) > .icon_general

.fa').click();         cy.get('fieldset > [type="text"]').type("AllowFineOverride");         cy.get('.btn').click();         cy.get('#pref_AllowFineOverride').select('1');         cy.get('.save-all').click();         cy.get('#toplevelmenu > :nth-child(2) > a').click();         cy.get('#search_patron_filter').clear();         cy.get('#search_patron_filter').type('edna');         cy.get('.action > .btn').click();         cy.get('#menu > ul > :nth-child(3) > a').click();         cy.get('.manualinvoice > a').click();         cy.get('#amount').type('42');         cy.get('[value="save"]').click();         cy.get('#menu > ul > :nth-child(1) > a').click();         cy.get('#barcode').clear();         cy.get('#barcode').type('3999900000001');         cy.get('#circ_circulation_issue > .btn').click();         cy.get('#circ_needsconfirmation').should('be.visible');         /* ==== End Cypress Studio ==== */     });

We want to modify this code to define the conditions to make it always pass: set the syspref to 0 and delete the fines we created for the patron. See the comment in the code below:     it.only('patrondebt', function() {         cy.set_syspref("AllowFineOverride", "0"); // We set the syspref AllowFineOverride to 0         cy.query( // We remove the accountlines for the patron we are going to use (edna)             "DELETE FROM accountlines WHERE borrowernumber=5"         );         cy.get(':nth-child(2) > .biglinks-list > :nth-child(6) > .icon_general

.fa').click();         cy.get('fieldset > [type="text"]').type("AllowFineOverride");         cy.get('.btn').click();         cy.get('#pref_AllowFineOverride').select('1');         cy.get('.save-all').click();         cy.get('#toplevelmenu > :nth-child(2) > a').click();         cy.get('#search_patron_filter').clear();         cy.get('#search_patron_filter').type('edna');         cy.get('.action > .btn').click();         cy.get('#menu > ul > :nth-child(3) > a').click();         cy.get('.manualinvoice > a').click();         cy.get('#amount').clear();         cy.get('#amount').type('42');         cy.get('[value="save"]').click();         cy.get("#menu > ul > :nth-child(1) > a").click();         cy.get("#barcode").clear();         cy.get("#barcode").type("3999900000001");         cy.get("#circ_circulation_issue > .btn").click();         cy.get('#circ_needsconfirmation').should('be.visible').screenshot("patrondebt"); // We add the screenshot call!     });

Look at the screenshot! Run the tests again, they are still passing and the screenshot is still the same! All work as expected. 8. Read the doc! (to be polite) See [1] Summary: We could try cypress-studio and see how non-dev people are happy with it. But the code generated will be, in my opinion, unmaintainable (ie. not robust). See the "Move to commands" commit, where we actually want to replace the generated code with something more readable and robust. I personally think that the structure of the test files is quite easy to understand, and with a bit more of command (like set_syspref, checkin, checkout) we could make things easier to write, way more easier than using cypress studio, but... I am a developer, this is certainly biased... There are several things to discuss here. Who is onboard? How the syntax read to non-tech people? Where do we move the code? When are the screenshots generated? How do we interact with the koha-manual project? Which data are we using? Should we always use the same patron, the same biblio, the same item? I will be happy to help and work on this. Send me your feedback! :) Note: The librarylist, newlibrary and patrondebt tests are available on a separate remote branch: cypress-studio-more (still in my gitlab repo) [1] https://docs.cypress.io/guides/references/cypress-studio -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 Jonathan Druart <jonathan.druart+koha@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |aude.charillon@ptfs-europe. | |com, | |caroline.cyr-la-rose@inlibr | |o.com, david@davidnind.com, | |katrin.fischer@bsz-bw.de, | |martin.renvoize@ptfs-europe | |.com -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #3 from Jonathan Druart <jonathan.druart+koha@gmail.com> --- Also note that "3. Run the tests" will fail if no language is installed. -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #5 from Jonathan Druart <jonathan.druart+koha@gmail.com> --- I have pushed a branch at https://gitlab.com/joubu/Koha/-/commits/cypress-studio The git log is a bit dirty but at least shows how I reached the current state. Note that this first try (POC) adds code to the Koha repo, but ideally we will certainly want it into its own repo. The idea is to use cypress-studio |1] to let users without development skills generate steps to reach the DOM element to screenshot (either the whole screen or a specific div). However we will then need developers to polish the generated code. So far the remote branch only generates 4 screenshots: prefsearch, searchbar-admin, prevcheckout and allowstafftosetvisibilityforguarantor (they are the names of the images in the manual). On the remote branch you can see "auto" and "manual" commits for those examples. The "auto" are auto-generated by cypress-studio. The "manual" is what needs to be done to make the tests run several times (either restore the state or init it before we run the tests). Eg. for prevcheckout we need to set the syspref to its original value (hardno) or it will already be "hardyes" and the test will fail to set it to "hardyes" The "manual" step also contain the screenshot part. Test plan: 0.a Checkout the remote branch % git remote add joubu https://gitlab.com/joubu/Koha/ % git fetch joubu % git checkout -b cypress-studio joubu/cypress-studio 0.b start ktd up 1. Generate the necessary built files: 1.a In your host: # will generate node_modules % yarn install 1.b Inside ktd: # should not be needed, but it is needed if ktd was up before you checked out the branch % yarn build 1.c Generate the template for other languages, inside ktd: % cd misc/translator/ % perl translate install fr-FR % perl translate install fr-CA % perl translate install es-ES Go to Koha, enable the 3 languages (search for the "language" syspref) 2. Run a docker container with the newest version of cypress (Koha is using 9 we want 12) Go to your Koha src directory and run (on your host then): % docker run -it \ -v $PWD:/e2e \ -v /tmp/.X11-unix:/tmp/.X11-unix \ -w /e2e \ -e DISPLAY \ --entrypoint cypress \ --network koha_kohanet \ cypress/included:12.14.0 open --project . If you get "No protocol specified" then run (still on the host) % xhost local:root And try again the 'docker run' command. It should open the cypress UI in a new window. Click "Continue" and you should see: https://snipboard.io/5KawXe.jpg Click "E2E Testing" (that should be with a green 'Configured'). Select the browser you want to try https://snipboard.io/Aynf64.jpg and click "Start E2E Testing in..." It will open a new window with the browser. It will list the different test files (found in t/cypress/integration): https://snipboard.io/Lk19cR.jpg 3. Run the tests Click on Manual/0-language-ui.ts https://snipboard.io/Bd3v4A.jpg The test should be green Click on "Specs" top left to open the side menu Click on 1-sysprefs.ts https://snipboard.io/4iIs2j.jpg Click on the next 2 tests. Are they all green? They should. 4. Admire the screenshots Go to t/cypress/screenshots/ you should see 4 screenshots en_prefsearch.png en_searchbar-admin.png en_prevcheckout.png en_allowstafftosetvisibilityforguarantor.png 5. Generate translated screenshots Close the Cypress UI (or ctrl-c in the console where you launched it), and now pass --env KOHA_LANG=fr-FR (to use the French template) docker run -it \ -v $PWD:/e2e \ -v /tmp/.X11-unix:/tmp/.X11-unix \ -w /e2e \ -e DISPLAY \ --entrypoint cypress \ --network koha_kohanet \ cypress/included:12.14.0 open --env KOHA_LANG=fr-FR --project . And retry 3. Now you should notice 4 new screenshots, prefixed with "fr-FR_" instead of "en_". They should be showing the French interface. 6. Create a new (easy) test! Here we are! Let's start with an easy one, librarylist: https://koha-community.org/manual/23.05/en/html/_images/librarylist.png So it would be another file, as it's a "library" thing create the following file: `t/cypress/integration/Manual/4-library.ts` With the following content: ``` describe("Libraries", function () { beforeEach(() => { cy.login(); cy.set_cookie_lang(); }); it("librarylist", function () { assert(true); }); }); ``` Go to the cypress UI (you can use a translated interface or the default/English one) and notice that it detected the new file, click on it. The beforeEach part is only there to login and set the language cookie before each test is run. The "it" block is doing nothing (apart from running a test that will always pass), but it's where we want our steps to be. https://snipboard.io/B4YCrK.jpg Hover your mouse over the "Libraries" line and notice the magic wand icon "Add new test". Tests rerun and you can interact with the UI! Go to Administation > Libraries. Now the goal is to find the correct element we want to screenshot. We want the "New library" button and the library list. Right click and locate the 'main' element (between the button and the "Libraries" title for instance). Click "Add assertion > be visible". Try to make as little "noise" as possible! Every interaction (mouse or keyboard) with the UI will be recorded! However, use the computer like it is your first time: do not use keyboard shortcuts, click on the input before you type, type slowly to make sure everything is recorded, click on the submit button instead of pressing enter, etc. You can remove the unnecessary steps by clicking the "times-circle" icon next to the step. When you are ready click "Save commands", enter a title: "librarylist". Now edit t/cypress/integration/Manual/4-library.ts You should see a new test added, something like: /* ==== 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.get('main').should('be.visible'); /* ==== End Cypress Studio ==== */ }); Remove the first librarylist 'it' (this is not ideal but I didn't manage to find an easy way to not do it for now). Commit! % git commit -a -m"auto librarylist" Edit it again replace the line cy.get('main').should('be.visible'); With cy.get('main').should('be.visible').screenshot("librarylist"); Save. Look at the screenshot! Hey! It was not an easy one (I didn't know I promise!) The screenshot does not show the libraries, because they are fetched in ajax, after the page is loaded. So edit again and add a "wait_for_ajax" call (that is doing what its named says it does): (I removed the comment lines) ``` it('librarylist', function() { 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"); }); ``` Save, look at the screenshot! Now it is showing the library list! Commit! `git commit -a -m"manual librarylist" Do not be afraid, this will be the work for a developer if you are not confident enough with modifying the test file. You can try a really easy one by yourself: https://koha-community.org/manual/23.05/en/html/_images/newlibrary.png There is no trick here! The generated code should be something like: 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('#Aform > :nth-child(1)').should('be.visible'); /* ==== End Cypress Studio ==== */ }); 7. Let's create a new complex test! Yes I know, the previous one was not easy finally, but it was not data dependent. patrondebt - https://koha-community.org/manual/23.05/en/html/_images/patrondebt.png We need to turn on AllowFineOverride, create a manual fine for a patron, and try to check them an item out. So click on "2-checkouts", "Checkouts", magic hand, and use the UI. Try to avoid any unnecessary actions! Try to do it perfectly the first time. Save the commands, run the test: it will fail. Why? Because the pref is now on, and you are trying to turn it on! However you could try your test after a reset_all (with a fresh DB). They should pass in this case, or it means something went wrong when you recorded the tests. No worries, once again it can be the work of a developer to adjust the tests. You should have something like that in 2-checkouts.ts /* ==== Test Created with Cypress Studio ==== */ it('patrondebt', function() { /* ==== Generated with Cypress Studio ==== */ cy.get(':nth-child(2) > .biglinks-list > :nth-child(6) > .icon_general

.fa').click(); cy.get('fieldset > [type="text"]').type("AllowFineOverride"); cy.get('.btn').click(); cy.get('#pref_AllowFineOverride').select('1'); cy.get('.save-all').click(); cy.get('#toplevelmenu > :nth-child(2) > a').click(); cy.get('#search_patron_filter').clear(); cy.get('#search_patron_filter').type('edna'); cy.get('.action > .btn').click(); cy.get('#menu > ul > :nth-child(3) > a').click(); cy.get('.manualinvoice > a').click(); cy.get('#amount').type('42'); cy.get('[value="save"]').click(); cy.get('#menu > ul > :nth-child(1) > a').click(); cy.get('#barcode').clear(); cy.get('#barcode').type('3999900000001'); cy.get('#circ_circulation_issue > .btn').click(); cy.get('#circ_needsconfirmation').should('be.visible'); /* ==== End Cypress Studio ==== */ });

We want to modify this code to define the conditions to make it always pass: set the syspref to 0 and delete the fines we created for the patron. See the comment in the code below: it.only('patrondebt', function() { cy.set_syspref("AllowFineOverride", "0"); // We set the syspref AllowFineOverride to 0 cy.query( // We remove the accountlines for the patron we are going to use (edna) "DELETE FROM accountlines WHERE borrowernumber=5" ); cy.get(':nth-child(2) > .biglinks-list > :nth-child(6) > .icon_general

.fa').click(); cy.get('fieldset > [type="text"]').type("AllowFineOverride"); cy.get('.btn').click(); cy.get('#pref_AllowFineOverride').select('1'); cy.get('.save-all').click(); cy.get('#toplevelmenu > :nth-child(2) > a').click(); cy.get('#search_patron_filter').clear(); cy.get('#search_patron_filter').type('edna'); cy.get('.action > .btn').click(); cy.get('#menu > ul > :nth-child(3) > a').click(); cy.get('.manualinvoice > a').click(); cy.get('#amount').clear(); cy.get('#amount').type('42'); cy.get('[value="save"]').click(); cy.get("#menu > ul > :nth-child(1) > a").click(); cy.get("#barcode").clear(); cy.get("#barcode").type("3999900000001"); cy.get("#circ_circulation_issue > .btn").click();

cy.get('#circ_needsconfirmation').should('be.visible').screenshot("patrondebt"); // We add the screenshot call! }); Look at the screenshot! Run the tests again, they are still passing and the screenshot is still the same! All work as expected. 8. Read the doc! (to be polite) See [1] Summary: We could try cypress-studio and see how non-dev people are happy with it. But the code generated will be, in my opinion, unmaintainable (ie. not robust). See the "Move to commands" commit, where we actually want to replace the generated code with something more readable and robust. I personally think that the structure of the test files is quite easy to understand, and with a bit more of command (like set_syspref, checkin, checkout) we could make things easier to write, way more easier than using cypress studio, but... I am a developer, this is certainly biased... There are several things to discuss here. Who is onboard? How the syntax read to non-tech people? Where do we move the code? When are the screenshots generated? How do we interact with the koha-manual project? Which data are we using? Should we always use the same patron, the same biblio, the same item? I will be happy to help and work on this. Send me your feedback! :) Note: The librarylist, newlibrary and patrondebt tests are available on a separate remote branch: cypress-studio-more (still in my gitlab repo) [1] https://docs.cypress.io/guides/references/cypress-studio -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #7 from Philip Orr <philip.orr@lmscloud.de> --- A note for Windows users: In step 4, If you're using ktd on wsl, your screenshots will be in your wsl subsystem. If you want to look at them in windows, you can do that easily in Windows by opening your Explorer (win+e) and you should see "Linux"->"Debian" on the left side of your explorer. In there the screenshots will be in: \\wsl.localhost\Debian\home\(whatever your user name ist)\git\koha\t\cypress\screenshots -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #9 from Philip Orr <philip.orr@lmscloud.de> --- In step 6, at this step:

...

So edit again and add a "wait_for_ajax" call (that is doing what its named says it does): I get an error running the test after adding the cy.wait_for_ajax call:

TypeError cy.wait_for_ajax is not a function t/cypress/integration/Manual/4-library.ts:12:12 10 | cy.get(':nth-child(2) > .biglinks-list > :nth-child(6) > .icon_general').click(); 11 | cy.get(':nth-child(1) > :nth-child(4) > :nth-child(1) > a').click();

12 | cy.wait_for_ajax(); | ^ 13 | cy.get('main').should('be.visible').screenshot("librarylist"); 14 | /* ==== End Cypress Studio ==== */ 15 | });

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

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 Tomás Cohen Arazi <tomascohen@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |tomascohen@gmail.com -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #12 from Philip Orr <philip.orr@lmscloud.de> --- Thanks for the update. After a git pull step 6 works for me now, no problems. I'm getting a different error now in part 7:

...

We want to modify this code to define the conditions to make it always pass: >>set the syspref to 0 and delete the fines we created for the patron. See the comment in the code below: it.only('patrondebt', function() { cy.set_syspref("AllowFineOverride", "0"); // We set the syspref >>AllowFineOverride to 0 cy.query( // We remove the accountlines for the patron we are going to use (edna) ...

I tried it first with my own cypress-studio-generated code and then tried it again with this code: ``` it.only('patrondebt', function() { cy.set_syspref("AllowFineOverride", "0"); // set syspref allowfineoverride to 0 cy.query( //we remove the accountlines for patron we will use (edna "DELETE FROM accountlines WHERE borrowernumber=5" ); cy.get(':nth-child(2) > .biglinks-list > :nth-child(6) > .icon_general').click(); cy.get('fieldset > [type="text"]').type('AllowFineOverride'); cy.get('.btn').click(); cy.get('#pref_AllowFineOverride').select('1'); cy.get('.save-all').click(); cy.get('img').click(); cy.get('#findborrower').clear(); cy.get('#findborrower').type('lisa charles{enter}'); cy.get('#patronsearch > button').click(); cy.get('#menu > ul > :nth-child(3) > a').click(); cy.get('.manualinvoice > a').click(); cy.get('#type').select('MANUAL'); cy.get('#amount').clear('5'); cy.get('#amount').type('5.00'); cy.get('[value="save"]').click(); cy.get('#menu > ul > :nth-child(1) > a').click(); cy.get('#barcode').clear('39999000005615'); cy.get('#barcode').type('39999000005615{enter}'); cy.get('#circ_circulation_issue > .btn').click(); cy.get('#circ_needsconfirmation').should('be.visible').screenshot("patrondebt"); }); }); ``` In both cases I got an error running the test: ``` cy.select() failed because this element is disabled: <select name="pref_AllowFineOverride" id="pref_AllowFineOverride" class="preference preference-choice">...</select> ``` -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #14 from Philip Orr <philip.orr@lmscloud.de> --- OK, got it working. Apparently the cy.select part was trying to select an option too soon when it hadn't been loaded yet? Anyway just adding cy.wait(2000); before selecting the option in the syspref fixed it for me. ``` it("patrondebt", function () { cy.set_syspref("AllowFineOverride", "0"); cy.query("DELETE FROM accountlines WHERE borrowernumber=5"); cy.get( ":nth-child(2) > .biglinks-list > :nth-child(6) > .icon_general > .fa" ).click(); cy.get('fieldset > [type="text"]').type("AllowFineOverride"); cy.get(".btn").click(); cy.wait(2000); cy.get("#pref_AllowFineOverride").select("1"); cy.get(".save-all").click(); cy.get("#toplevelmenu > :nth-child(2) > a").click(); cy.get("#search_patron_filter").clear(); cy.get("#search_patron_filter").type("edna"); cy.get(".action > .btn").click(); cy.get("#menu > ul > :nth-child(3) > a").click(); cy.get(".manualinvoice > a").click(); cy.get("#amount").clear(); cy.get("#amount").type("42"); cy.get('[value="save"]').click(); cy.get("#menu > ul > :nth-child(1) > a").click(); cy.get("#barcode").clear(); cy.get("#barcode").type("3999900000001"); cy.get("#circ_circulation_issue > .btn").click(); cy.get("#circ_needsconfirmation") .should("be.visible") .screenshot("patrondebt"); }); ``` -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #16 from Philip Orr <philip.orr@lmscloud.de> --- Didn't mean to attach a patch, just to sign off.. Sorry! Anyway everything worked for me and imo it wasn't too complicated for non-devs like me to use. See the above comments for more info. -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 Jonathan Druart <jonathan.druart+koha@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- See Also| |https://bugs.koha-community | |.org/bugzilla3/show_bug.cgi | |?id=34319 -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #18 from Caroline Cyr La Rose <caroline.cyr-la-rose@inlibro.com> --- I redid step 5 after removing all the additional languages in my Koha and they were all green! I don't remember exactly which command ended up working, but I think it was git clean -fxd -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #20 from Jonathan Druart <jonathan.druart+koha@gmail.com> --- (In reply to Caroline Cyr La Rose from comment #17)

In step 6 still, the first commit command didn't work for me, I think because the file did not exist before (nothing added to commit but untracked files present (use "git add" to track)), so I did

git add 4-library.ts

git commit -m "auto librarylist"

Correct, good catch! I am not sure what's the best solution to adjust the test plan... :-/ -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #22 from Jonathan Druart <jonathan.druart+koha@gmail.com> --- Yes, add+commit is better. I meant: I don't know how keep an up-to-date version of the test plan. Adding a new comment here does not feel very optimal. -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #24 from Aude Charillon <aude.charillon@ptfs-europe.com> --- My turn to have a go... I feel like we're doing this in order of who's most comfortable with these types of tool, and I'll readily admit that I'm definitely at the bottom of the ladder! :-D And to continue the metaphor, the first rung was high for me, partly because I don't even have the background knowledge to understand the vocabulary in the instructions. Like, I had to ask where I was supposed to be exactly when Joubu says "in the host" compared to "inside ktd" (yes, I'm that low). I got an error in step 0.b, which sounds similar to what Philip and Caroline had. Mine said: koha-koha-1 | Koha requires mpm_itk to be enabled within Apache in order to run. koha-koha-1 | Typically this can be enabled with: koha-koha-1 | koha-koha-1 | sudo a2enmod mpm_itk Matt had helped me install ktd so he kindly helped me with that one too. He said apparenly node wasn't installed. I am now stuck at step 2. I get this error: DevTools listening on ws://127.0.0.1:46611/devtools/browser/1d660389-290b-467c-93d6-9a8b22bc0611 [411:0724/133802.190694:ERROR:gpu_memory_buffer_support_x11.cc(44)] dri3 extension not supported. Missing baseUrl in compilerOptions. tsconfig-paths will be skipped I had the same error today as on Friday. The good news is, when I tried again today I managed to get back to this step very quickly and without any issues! -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #26 from Caroline Cyr La Rose <caroline.cyr-la-rose@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#librarie... 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=1...'); 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.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 Jessie Zairo <jzairo@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |jzairo@bywatersolutions.com | |, | |kelly@bywatersolutions.com -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #28 from Caroline Cyr La Rose <caroline.cyr-la-rose@inlibro.com> --- 10.6% of images have been analyzed 50% are easy and 16% are medium We will start with 10 easy images and add the code here as an attachment. Jonathan will check the generated code and see if it's too much work to clean it up or not. -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |lucas@bywatersolutions.com -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #30 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- (In reply to Philip Orr from comment #29)

note for future me: If after fetching from joubu you get an error message in Koha: DBIx::Class::Storage::DBI::_dbh_execute(): DBI Exception: DBD::mysql::st execute failed: Unknown column 'lang' in 'where clause' at /kohadevbox/koha/Koha/Objects.pm line 421 just restart ktd (ktd down, then ktd up) and that should fix it.

A restart_all might also do the trick if you want to try that first. -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #32 from Philip Orr <philip.orr@lmscloud.de> --- so, I did 10 random easy screenshots from the spreadsheet. It all worked. Here is the code: (Please tell me if I should add this as an attachment instead of as a comment!) Screenshot for: About -> perl modules ´´´ describe("Libraries", function () { beforeEach(() => { cy.login(); cy.set_cookie_lang(); }); /* ==== Test Created with Cypress Studio ==== */ it('aboutperlmodules', function() { /* ==== Generated with Cypress Studio ==== */ cy.get(':nth-child(2) > .biglinks-list > :nth-child(7) > .icon_general').click(); cy.get('#perl-tab > span').click(); cy.get('.tab-content').should('be.visible').screenshot("aboutperlmodules"); /* ==== End Cypress Studio ==== */ }); }); ``` Screenshot for: Acquisitions -> Add Basket ´´´ describe("Libraries", function () { beforeEach(() => { cy.login(); cy.set_cookie_lang(); }); /* ==== Test Created with Cypress Studio ==== */ it('addbasket', function() { /* ==== Generated with Cypress Studio ==== */ cy.get(':nth-child(2) > .biglinks-list > :nth-child(3) > .icon_general').click(); cy.get('p > .btn').click(); cy.get('.btn > .caret').click(); cy.get('.open > .dropdown-menu > :nth-child(1) > a').click(); cy.get('.col-md-10').should('be.visible').screenshot("addbasket"); /* ==== End Cypress Studio ==== */ }); }); ``` Screenshot for New Vendor -> Interfaces ´´´ describe("Libraries", function () { beforeEach(() => { cy.login(); cy.set_cookie_lang(); }); /* ==== Test Created with Cypress Studio ==== */ it('newvendor-interfaces', function() { /* ==== Generated with Cypress Studio ==== */ cy.get(':nth-child(2) > .biglinks-list > :nth-child(3) > .icon_general').click(); cy.get('.btn-group > .btn').click(); cy.get('#interfaces > .btn').click(); cy.get('#interfaces').should('be.visible').screenshot("newvendor-interfaces"); /* ==== End Cypress Studio ==== */ }); }); ``` Screenshot for Acquisitions -> Currencies ´´´ describe("Libraries", function () { beforeEach(() => { cy.login(); cy.set_cookie_lang(); }); /* ==== Test Created with Cypress Studio ==== */ it('currencies', function() { /* ==== Generated with Cypress Studio ==== */ cy.get(':nth-child(2) > .biglinks-list > :nth-child(3) > .icon_general').click(); cy.get(':nth-child(6) > :nth-child(3) > a').click(); cy.get('.page-section').should('be.visible').screenshot("currencies"); /* ==== End Cypress Studio ==== */ }); }); ``` Screenshot for Administration -> Z39.50/SRU Servers -> New Z39.50 Server ´´´ describe("Libraries", function () { beforeEach(() => { cy.login(); cy.set_cookie_lang(); }); /* ==== Test Created with Cypress Studio ==== */ it('newz39', function() { /* ==== Generated with Cypress Studio ==== */ cy.get(':nth-child(2) > .biglinks-list > :nth-child(6) > .icon_general').click(); cy.get(':nth-child(2) > :nth-child(6) > :nth-child(3) > a').click(); cy.get('[href="/cgi-bin/koha/admin/z3950servers.pl?op=add&type=zed"]').click(); cy.get('.rows').should('be.visible').screenshot("newz39"); /* ==== End Cypress Studio ==== */ }); }); ``` Screenshot for Administration -> Debit Types -> Show all debit types ´´´ describe("Libraries", function () { beforeEach(() => { cy.login(); cy.set_cookie_lang(); }); /* ==== Test Created with Cypress Studio ==== */ it('alldebittypes', function() { /* ==== Generated with Cypress Studio ==== */ cy.get(':nth-child(2) > .biglinks-list > :nth-child(6) > .icon_general').click(); cy.get(':nth-child(8) > :nth-child(1) > a').click(); cy.get('#filter_system').click(); cy.get('#table_debit_types_wrapper').should('be.visible').screenshot("alldebittypes"); /* ==== End Cypress Studio ==== */ }); }); ``` Screenshot for Administration -> Credit Types -> Show all credit types ´´´ describe("Libraries", function () { beforeEach(() => { cy.login(); cy.set_cookie_lang(); }); /* ==== Test Created with Cypress Studio ==== */ it('allcredittypes', function() { /* ==== Generated with Cypress Studio ==== */ cy.get(':nth-child(2) > .biglinks-list > :nth-child(6) > .icon_general').click(); cy.get(':nth-child(8) > :nth-child(3) > a').click(); cy.get('#filter_system').click(); cy.get('.page-section').should('be.visible').screenshot("credittypes"); /* ==== End Cypress Studio ==== */ }); }); ``` Screenshot for Acquisitions -> Budgets -> Close Budget (without unreceived orders) ´´´ describe("Libraries", function () { beforeEach(() => { cy.login(); cy.set_cookie_lang(); }); /* ==== Test Created with Cypress Studio ==== */ it('nounreceivedorders', function() { /* ==== Generated with Cypress Studio ==== */ cy.get(':nth-child(2) > .biglinks-list > :nth-child(3) > .icon_general').click(); cy.get(':nth-child(6) > :nth-child(1) > a').click(); cy.get('#budgetmenu_1').click(); cy.get('.btn-group > .dropdown-menu > :nth-child(4) > a').click(); cy.get('.col-sm-10').should('be.visible').screenshot("nounreceivedorders"); /* ==== End Cypress Studio ==== */ }); }); ``` Screenshot for Acquisitions -> Budgets -> Main Budget -> Planning -> Months -> Export CSV ´´´ describe("Libraries", function () { beforeEach(() => { cy.login(); cy.set_cookie_lang(); }); /* ==== Test Created with Cypress Studio ==== */ it('planningcsv', function() { /* ==== Generated with Cypress Studio ==== */ cy.get(':nth-child(2) > .biglinks-list > :nth-child(3) > .icon_general').click(); cy.get(':nth-child(6) > :nth-child(1) > a').click(); cy.get('.sorting_1 > a').click(); cy.get(':nth-child(3) > .btn').click(); cy.get('.open > .dropdown-menu > :nth-child(1) > a').click(); cy.get('.col-sm-2 > aside:nth-child(1) > form:nth-child(2)').should('be.visible').screenshot("planningcsv"); /* ==== End Cypress Studio ==== */ }); }); ``` Note: the button "Submit" doesn't show up for some reason, even though it should be part of the form I selected. Screenshot for Acquisitions -> Vendors -> My Vendor -> New Contract Form ´´´ describe("Libraries", function () { beforeEach(() => { cy.login(); cy.set_cookie_lang(); }); /* ==== Test Created with Cypress Studio ==== */ it('newcontractform', function() { /* ==== Generated with Cypress Studio ==== */ cy.get(':nth-child(2) > .biglinks-list > :nth-child(3) > .icon_general').click(); cy.get('p > .btn').click(); cy.get('.suppliername > :nth-child(1)').click(); cy.get(':nth-child(1) > .btn').click(); cy.get('.open > .dropdown-menu > :nth-child(2) > a').click(); cy.get('.page-section').should('be.visible').screenshot("newcontractform"); /* ==== End Cypress Studio ==== */ }); }); ``` -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #33 from Aude Charillon <aude.charillon@ptfs-europe.com> --- The experimentation continues! We are now analysing screenshots directly using Jonathan's site. The latest guidelines are at: https://link.infini.fr/_Nzb3p-w -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34076 --- Comment #35 from David Nind <david@davidnind.com> --- Update and notes from the 28 May 2025 documentation team meeting: 1. If we need more logins for the screenshot website, contact Jonathan. 2. Aude and Caroline provided an update following their meeting with Jonathan, and demoed the updated site for analysing screenshots. 3. Aude showed us how to check images and went through the guidelines. 4. An important new section is the “Teardown” - note how to undo what you’ve done as setup. Otherwise, it would be repeated for the next language and could cause problems. 5. The best way to start is now to go to All screenshots > New (then click column header to sort). If there isn’t an entry in “New”, it’s a good screenshot to analyse (unless “Error” is filled with “Yes”, then it’s necessary to check the screenshot, and why there is an error). Quick links: - Website for screenshots: https://koha-manual-screenshots-wip.koha-community.org/ - Guidelines: https://docs.google.com/document/d/1zFlWEifdqR_-q8hBUAKrtspUXTvww-meNpWWKP6j... -- You are receiving this mail because: You are watching all bug changes.