graphdb-workbench-tests 3.3.3 → 3.4.0-TR1

package/e2e-legacy/guides/visual-graph/visual-graph-guide.spec.js

@@ -0,0 +1,372 @@
+import {GuidesStubs} from "../../../stubs/guides/guides-stubs.js";
+import {GuideSteps} from "../../../steps/guides/guide-steps.js";
+import {GuideDialogSteps} from "../../../steps/guides/guide-dialog-steps.js";
+import {MainMenuSteps} from "../../../steps/main-menu-steps.js";
+import {VisualGraphSteps} from "../../../steps/visual-graph-steps.js";
+
+describe('Visual Graph', () => {
+    const FILE_TO_IMPORT = 'wine.rdf';
+    let repositoryId;
+
+    beforeEach(() => {
+        repositoryId = 'visual-graph-guide-step-' + Date.now();
+        cy.createRepository({id: repositoryId});
+        cy.presetRepository(repositoryId);
+        cy.enableAutocomplete(repositoryId);
+        cy.importServerFile(repositoryId, FILE_TO_IMPORT);
+    });
+
+    afterEach(() => {
+        cy.deleteRepository(repositoryId);
+    });
+
+    describe('Visual graph explore guide', () => {
+        beforeEach(() => {
+            GuidesStubs.stubVisualGraphGuide();
+            GuideSteps.visit();
+            GuideSteps.verifyGuidesListExists();
+            cy.wait('@getGuides');
+            GuideSteps.runFirstGuide();
+        });
+
+        it('Should explore the visual graph (User interaction)', () => {
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 1/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The following steps show how to use the Visual graph view to explore data in a visual manner.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 2/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Explore menu.');
+            MainMenuSteps.clickOnExplore();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 3/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Visual graph menu.');
+            MainMenuSteps.clickOnSubmenuVisualGraph();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 4/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter wine in the Easy graph text input.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 5/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#Wine IRI to show the visual graph.');
+            VisualGraphSteps.clickOnAutocompleteElement('wine <http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#Wine>');
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 6/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The graph shows connections between the start node, wine, and other nodes. Each arrow represents one or more connections (RDF statements).');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph nodes');
+            GuideDialogSteps.assertDialogWithContentIsVisible('A circle represents an RDF resource. In this case, wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph links');
+            GuideDialogSteps.assertDialogWithContentIsVisible('An arrow with a label represents one or more links between nodes. In this case, the arrow shows the relation Wine → type → Potable Liquid.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 1/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on Wine to show its properties.');
+            VisualGraphSteps.clickOnNode('http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#Wine');
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 2/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The side panel shows the properties of the clicked node, Wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 3/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Types shows all the RDF types for Wine.We can see that Wine has a single type, owl:Class.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 4/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The values for generic properties like rdfs:label are listed in dedicated sections.This shows the label of Wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 5/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('This shows the label of Wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 6/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('You can close the panel by clicking on the X icon.');
+            VisualGraphSteps.closeSidePanel();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph: expand node');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Double click on Whitehall Lane Primavera to expand the graph.');
+            VisualGraphSteps.dblclickOnNode('http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#WhitehallLanePrimavera');
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph nodes');
+            GuideDialogSteps.assertDialogWithContentIsVisible('A circle represents an RDF resource. In this case, Napa Region.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('End of guide');
+            GuideDialogSteps.assertDialogWithContentIsVisible('This guide has ended.');
+        });
+
+        it('Should explore the visual graph (Next flow)', () => {
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 1/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The following steps show how to use the Visual graph view to explore data in a visual manner.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 2/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Explore menu.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 3/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Visual graph menu.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 4/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter wine in the Easy graph text input.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 5/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#Wine IRI to show the visual graph.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 6/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The graph shows connections between the start node, wine, and other nodes. Each arrow represents one or more connections (RDF statements).');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph nodes');
+            GuideDialogSteps.assertDialogWithContentIsVisible('A circle represents an RDF resource. In this case, wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph links');
+            GuideDialogSteps.assertDialogWithContentIsVisible('An arrow with a label represents one or more links between nodes. In this case, the arrow shows the relation Wine → type → Potable Liquid.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 1/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on Wine to show its properties.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 2/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The side panel shows the properties of the clicked node, Wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 3/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Types shows all the RDF types for Wine.We can see that Wine has a single type, owl:Class.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 4/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The values for generic properties like rdfs:label are listed in dedicated sections.This shows the label of Wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 5/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('This shows the label of Wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 6/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('You can close the panel by clicking on the X icon.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph: expand node');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Double click on Whitehall Lane Primavera to expand the graph.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph nodes');
+            GuideDialogSteps.assertDialogWithContentIsVisible('A circle represents an RDF resource. In this case, Napa Region.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('End of guide');
+            GuideDialogSteps.assertDialogWithContentIsVisible('This guide has ended.');
+        });
+    });
+
+    describe('Visual graph create config guide', () => {
+        beforeEach(() => {
+            cy.deleteGraphConfig('visual');
+            cy.intercept('rest/explore-graph/node?config=**').as('getNodes');
+            GuidesStubs.stubVisualGraphConfigGuide();
+            GuideSteps.visit();
+            GuideSteps.verifyGuidesListExists();
+            cy.wait('@getGuides');
+            GuideSteps.runFirstGuide();
+        });
+
+        it('Should create a visual graph config (User interaction)', () => {
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 1/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Explore menu.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 2/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Visual graph menu.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 3/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the create config button to Create graph config.');
+            VisualGraphSteps.createCustomGraph();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 4/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter a name for your visual graph configuration.');
+            VisualGraphSteps.typeGraphConfigName('visual');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 5/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter a description: my description');
+            VisualGraphSteps.typeGraphConfigDescription('my description');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 6/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Copy and use the following IRI as the starting point for the visual graph: my hint');
+            VisualGraphSteps.typeGraphConfigHint('my hint');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 7/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Starting point defines how the visual graph begins when it is opened. It determines the first resource or set of results that will appear in the graph and from which the visualization starts.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 9/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Select Start with a fixed node to always start the visual graph from a specific resource.')
+            VisualGraphSteps.selectStartMode('node');
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 10/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter the following text: MerlotGrape');
+            VisualGraphSteps.searchForRdfResource('MerlotGrape');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 11/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#MerlotGrape');
+            VisualGraphSteps.clickOnAutocompleteElement('http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#MerlotGrape');
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 12/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Graph expansion tab');
+            VisualGraphSteps.openConfigTab(2);
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 13/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter the following SPARQL query:');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The graph expansion query defines what happens when a node is expanded in the visual graph. Expanding a node loads additional resources connected to it and adds them to the graph as new nodes and edges.');
+            GuideDialogSteps.copyQueryToEditor();
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 14/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Include inferred data in results includes inferred statements produced by reasoning in the query results. Clicking the toggle disables this behavior.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 15/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Expand results over owl sameAs includes equivalent resources connected with owl:sameAs in the query results. Clicking the toggle disables this behavior.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 16/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The Sample queries includes example graph expansion queries. Unfiltered object properties shows all object property connections of a node, while Filtered object properties shows only selected ones.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 17/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Check the Share visual graph with other users box to make the visual graph configuration available to other users in the repository.');
+            VisualGraphSteps.shareVisualGraphWithOtherUsers();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 18/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click to save the visual graph configuration.');
+            VisualGraphSteps.saveConfig();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 19/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click the visual graph you just created to open and explore it.');
+            VisualGraphSteps.selectConfig('visual');
+
+            Cypress._.times(4, () => cy.wait('@getNodes'));
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 20/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter 200 as the maximum number of links to show.');
+            VisualGraphSteps.updateLinksLimitField(200);
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 21/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Double click on WineGrape to expand the graph.');
+            VisualGraphSteps.dblclickOnNode('http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#WineGrape')
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 22/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Scrolling with the mouse wheel or two fingers on the touchpad zooms the visual graph in and out.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('End of guide');
+        });
+
+        it('Should create a visual graph config (next flow)', () => {
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 1/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Explore menu.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 2/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Visual graph menu.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 3/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the create config button to Create graph config.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 4/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter a name for your visual graph configuration.');
+            VisualGraphSteps.typeGraphConfigName('visual');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 5/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter a description: my description');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 6/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Copy and use the following IRI as the starting point for the visual graph: my hint');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 7/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Starting point defines how the visual graph begins when it is opened. It determines the first resource or set of results that will appear in the graph and from which the visualization starts.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 9/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Select Start with a fixed node to always start the visual graph from a specific resource.')
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 10/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter the following text: MerlotGrape');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 11/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#MerlotGrape');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 12/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Graph expansion tab');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 13/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter the following SPARQL query:');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The graph expansion query defines what happens when a node is expanded in the visual graph. Expanding a node loads additional resources connected to it and adds them to the graph as new nodes and edges.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 14/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Include inferred data in results includes inferred statements produced by reasoning in the query results. Clicking the toggle disables this behavior.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 15/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Expand results over owl sameAs includes equivalent resources connected with owl:sameAs in the query results. Clicking the toggle disables this behavior.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 16/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The Sample queries includes example graph expansion queries. Unfiltered object properties shows all object property connections of a node, while Filtered object properties shows only selected ones.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 17/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Check the Share visual graph with other users box to make the visual graph configuration available to other users in the repository.');
+            VisualGraphSteps.shareVisualGraphWithOtherUsers();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 18/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click to save the visual graph configuration.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 19/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click the visual graph you just created to open and explore it.');
+            VisualGraphSteps.selectConfig('visual');
+
+            Cypress._.times(4, () => cy.wait('@getNodes'));
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 20/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter 200 as the maximum number of links to show.');
+            VisualGraphSteps.updateLinksLimitField(200);
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 21/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Double click on WineGrape to expand the graph.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 22/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Scrolling with the mouse wheel or two fingers on the touchpad zooms the visual graph in and out.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('End of guide');
+        });
+    });
+});

package/e2e-legacy/guides/welcome/welcome-guide.spec.js

@@ -0,0 +1,36 @@
+import {GuidesStubs} from "../../../stubs/guides/guides-stubs.js";
+import {GuideSteps} from "../../../steps/guides/guide-steps.js";
+import {GuideDialogSteps} from "../../../steps/guides/guide-dialog-steps.js";
+
+describe('Welcome', () => {
+    let repositoryId;
+
+    beforeEach(() => {
+        repositoryId = 'welcome-guide-step-' + Date.now();
+        GuidesStubs.stubWelcomGuide();
+        cy.createRepository({id: repositoryId});
+        cy.presetRepository(repositoryId);
+
+        GuideSteps.visit();
+        GuideSteps.verifyGuidesListExists();
+        cy.wait('@getGuides');
+        GuideSteps.runFirstGuide()
+    });
+
+    afterEach(() => {
+        cy.deleteRepository(repositoryId);
+    });
+
+    it.only('Should shows welcome steps', () => {
+        GuideDialogSteps.assertDialogWithTitleIsVisible('Welcome to Welcome — 1/2');
+        GuideDialogSteps.assertDialogWithContentIsVisible('Throughout the guide you will see boxes like this one that will provide instructions on what to do.');
+        GuideDialogSteps.clickOnNextButton();
+
+        GuideDialogSteps.assertDialogWithTitleIsVisible('Welcome to Welcome — 2/2');
+        GuideDialogSteps.assertDialogWithContentIsVisible('Test welcome guideLet\'s get started for real now!');
+        GuideDialogSteps.clickOnNextButton();
+
+        GuideDialogSteps.assertDialogWithTitleIsVisible('End of guide');
+        GuideDialogSteps.assertDialogWithContentIsVisible('This guide has ended.');
+    });
+});

package/e2e-legacy/help/guides/guides-autostart.spec.js

@@ -14,6 +14,39 @@ describe('Guides autostart', () => {
             GuideSteps.assertPageNotInteractive();
             GuideDialogSteps.assertDialogWithTitleIsVisible(`Welcome to`);
         });
+
+        it('should not autostart the guide if it has been completed via autostart before', () => {
+            // Given, I visit the home page with autostart guide parameter in URL
+            GuideSteps.autostartGuide(guideName);
+            // Then, I should see the guide
+            GuideSteps.assertPageNotInteractive();
+            GuideDialogSteps.assertDialogWithTitleIsVisible(`Welcome to`);
+
+            // When, I finish the guide
+            GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.clickOnNextButton();
+            // skip create repo
+            GuideDialogSteps.clickOnSkipButton();
+            // skip select repo
+            GuideDialogSteps.clickOnSkipButton();
+            // skip autocomplete
+            GuideDialogSteps.clickOnSkipButton();
+            // skip import
+            GuideDialogSteps.clickOnSkipButton();
+            // skip visual graph
+            GuideDialogSteps.clickOnSkipButton();
+            // skip sparql
+            GuideDialogSteps.clickOnSkipButton();
+            // close the dialog, completing the guide
+            GuideDialogSteps.clickOnCloseButton();
+
+            // Then, I should not see the guide anymore. A disabled flag should be set to true in the storage, when the
+            // guide is completed via autostart, preventing the guide from autostarting again.
+            GuideSteps.autostartGuide(guideName);
+            HomeSteps.getTutorialPanel().should('be.visible');
+            GuideSteps.getGuidesModal().should('not.exist');
+            GuideDialogSteps.getModalDialog().should('not.exist');
+        });
     });
 
     describe('With security enabled', () => {
@@ -26,7 +59,7 @@ describe('Guides autostart', () => {
             cy.switchOffSecurity(true);
         });
 
-        context('admin', () => {
+        describe('admin', () => {
             it('Should autostart guide with admin', () => {
                 // Given, I visit the home page with autostart guide parameter in URL
                 GuideSteps.autostartGuide(guideName);
@@ -38,7 +71,7 @@ describe('Guides autostart', () => {
             });
         });
 
-        context('repo manager', () => {
+        describe('repo manager', () => {
             beforeEach(() => {
                 cy.loginAsAdmin();
                 cy.createUser({
@@ -64,7 +97,7 @@ describe('Guides autostart', () => {
             });
         });
 
-        context('user', () => {
+        describe('user', () => {
             beforeEach(() => {
                 cy.loginAsAdmin();
                 cy.createUser({

package/e2e-legacy/help/guides/guides-confirm-cancel-dialog.js

@@ -0,0 +1,83 @@
+import {GuideSteps} from "../../../steps/guides/guide-steps.js";
+import {GuideDialogSteps} from "../../../steps/guides/guide-dialog-steps.js";
+import {GuidesStubs} from "../../../stubs/guides/guides-stubs.js";
+
+describe('Confirm cancel dialog', () => {
+    it('Should open confirm cancel dialog', () => {
+        GuidesStubs.stubWelcomGuide();
+        GuideSteps.visit();
+        GuideSteps.verifyGuidesListExists();
+        cy.wait('@getGuides');
+
+        // Given, I start a guide
+        GuideSteps.runFirstGuide();
+        GuideSteps.assertPageNotInteractive();
+        GuideDialogSteps.assertDialogWithTitleIsVisible(`Welcome to`);
+
+        // When, I try to cancel the guide
+        GuideDialogSteps.clickOnCancelButton();
+
+        // Then, I should see a confirm cancel dialog
+        GuideDialogSteps.getConfirmCancelDialog().should('be.visible');
+        GuideDialogSteps.getModalDialog().should('not.exist');
+
+        // When I press the cancel button
+        GuideDialogSteps.clickConfirmCancelDialogCancelButton();
+
+        // Then, I should see the guide dialog again as I didn't cancel it
+        GuideDialogSteps.getModalDialog().should('be.visible');
+        GuideDialogSteps.assertDialogWithTitleIsVisible(`Welcome to`);
+
+        // When I press the cancel dialog again
+        GuideDialogSteps.clickOnCancelButton();
+        GuideDialogSteps.getConfirmCancelDialog().should('be.visible');
+        GuideDialogSteps.getModalDialog().should('not.exist');
+
+        // And click on the close (X) icon button
+        GuideDialogSteps.clickOnConfirmCancelDialogCloseButton();
+
+        // Then, I should see the guide again as I didn't cancel it
+        GuideDialogSteps.getModalDialog().should('be.visible');
+        GuideDialogSteps.assertDialogWithTitleIsVisible(`Welcome to`);
+
+        // When I try to cancel it a third time
+        GuideDialogSteps.clickOnCancelButton();
+        GuideDialogSteps.getConfirmCancelDialog().should('be.visible');
+        GuideDialogSteps.getModalDialog().should('not.exist');
+
+        // And click on exit
+        GuideDialogSteps.clickConfirmCancelDialogExitButton();
+
+        // Then, I should see the guides list and no active guide as I canceled it
+        GuideDialogSteps.getModalDialog().should('not.exist');
+        GuideDialogSteps.getConfirmCancelDialog().should('not.exist');
+    });
+
+    it('Should disable autostart when don\'t show again is pressed', () => {
+        const guideName = 'star-wars';
+        // Given, I visit the home page with autostart guide parameter in URL
+        GuideSteps.autostartGuide(guideName);
+        // Then, I should see the guide
+        GuideSteps.assertPageNotInteractive();
+        GuideDialogSteps.assertDialogWithTitleIsVisible(`Welcome to`);
+
+        // When I try to cancel the dialog
+        GuideDialogSteps.clickOnCancelButton();
+
+        // Then, I should see a confirm cancel dialog with "Don't show again" button
+        GuideDialogSteps.getConfirmCancelDialog().should('be.visible');
+        GuideDialogSteps.getConfirmCancelDialogDontShowAgainButton().should('be.visible');
+
+        // When I click on the "don't show again" button
+        GuideDialogSteps.clickConfirmCancelDialogDontShowAgainButton();
+
+        // Then, the confirm cancel dialog should be closed and the guide should be canceled
+        GuideDialogSteps.getConfirmCancelDialog().should('not.exist');
+
+        // When I try to autostart it again
+        GuideSteps.autostartGuide(guideName);
+        // Then, I should not see the guide anymore. A disabled flag should be set to true in the storage,
+        // when the guide is completed via autostart, preventing the guide from autostarting again.
+        GuideDialogSteps.getModalDialog().should('not.exist');
+    });
+});