How to set paths for multi-page-applications when using vue? - vue.js

I want to build a web-application using Vue which should have a website structure like this:
index-page
|--page1
|--page2
|--page3
...
That is, I have 1 index-page that will be my home-page which contains the link for all other pages.
But, each page is from some category and a sub-category, so I want that the address for each page should be like this:
localhost:8080/category/sub-category/page
example: localhost:8080/algorithms/sorting/bubble
In my project structure, these categories and sub-categories are placed like this:
my-project/src/category/sub-category/page/files
my-project
|--src
|--App.vue // for index page
|--main.js // for index page
|--algorithms
| |--sorting
| | |--bubble
| | | |--bubble.html
| | | |--App.vue
| | | |--main.js
| | |
| | |--selection
| | | |--selection.html
| | | |--App.vue
| | | |--main.js
| | ...
| ...
...
These categories and sub-categories are placed on index page like this:
<h2>category</h2>
<h3>sub-category</h3>
<ul>
<li>page</li>
...
</ul>
...
...
I want that any address of the form
localhost:8080/category
or
localhost:8080/category/sub-category
should lead to index page and addresses of the form
localhost:8080/category/sub-category/page
should load the corresponding page.
So, how should I configure my vue.config.js file?
Can I do it only once for all pages like given here for my project structure?
I only want that my website is working correctly and is developed in the correct way (without using any hacks).
Every page is independent of each other. But each page on its own should be a SPA.
Also, I want to know how these all things are related to each other in vue.config.js:
the string that we put in href of
the path displayed in browser window
the path from where the page is loaded from the project
I am asking above question because I have doubt whether the path user sees is same as the path in the project?
Well, since I am using no directory named pages, does that make a difference?

Well. Personally I was building a Vue app with laravel and what I used and mostly a lot of people use is a Vue router.
https://router.vuejs.org/
You can define the links there and it stops the page from reloading and supports transitions for pages. And uses a specific Vue Router href. Hope this somewhat answers your question.

nuxt.js was what I needed. The pages directory handles it all.

Related

How to use the scenario as prerequisite of another scenario

first feature file
Feature: CRMSmokeTest
In order to make sure that CRM Key functionalities working as expected.
Background:
Given I have entered the CRM URL
Scenario Outline:Quick Search using AccountID
Given AccountID is selected in The Quick Search
When user enter the <AccountID> in search field
And Click on Quick Search button
And Close the Alerts
Then Title of the page contains <AccountID>
Examples:
| AccountID |
| 116999 |
Second Feature File
Feature: CRM Ticket Open, Add and Amend
In order to verify thay user able to open and amend existing ticket
Also to verify that user is able to create a new Ticket
Background:
Given I have entered the CRM URL
And AccountID is selected in The Quick Search
#mytag
Scenario Outline: Add a new Ticket
When user enter the <AccountID> in search field
And Click on Quick Search button
And Close the Alerts
Then Title of the page contains <AccountID>
When User click on Add New link on Ticket Section
And Select the <Departmnet> and <SubTeam> from the list
And Enter the <Subject> of the ticket
And Select the <Product>
And Select the <TicketCategory> and <TicketSubCategory>
And Enter the <Comments> and <PersonSpokeTo>
And Click on Finish
Then A new Ticket is created
Examples:
| AccountID | Department | SubTeam | Subject | Product | TicketCategory | TicketSubCategory | Comments |
| 116999 | Customer Services | ContractEnquiry | Test Ticket | Home Insurance | Account Management | Customer Zone | Test Comments |
I would like to use the Scenario in my first feature file as the prereq of my scenario in second feature file.
What is the best practice to so
Also When filling a big data form what is the best approach to write scenario. The way I have written the scenario in second feature file is the only approach or we can write this better way?
Calling a different scenario because it satisfies the prerequisites of the current scenario breaks the isolation required to make each scenario runnable on its own. No scenario should rely on any other scenario.
Instead of copying and pasting the steps from the first scenario, write a short Given step that performs the same things as the first scenario.
Judging on the scenario title, create a Given step similar to:
Scenario Outline: Add a new Ticket
# New 'Given' step that basically does the same thing as scenario #1
Given user performed a quick search for account <AccountID>
# Now continue on with the rest of the scenario
When User click on Add New link on Ticket Section
And Select the <Departmnet> and <SubTeam> from the list
And Enter the <Subject> of the ticket
And Select the <Product>
And Select the <TicketCategory> and <TicketSubCategory>
And Enter the <Comments> and <PersonSpokeTo>
And Click on Finish
Then A new Ticket is created
Examples:
| AccountID | Department | SubTeam | Subject | Product | TicketCategory | TicketSubCategory | Comments |
| 116999 | Customer Services | ContractEnquiry | Test Ticket | Home Insurance | Account Management | Customer Zone | Test Comments |
The implementation of this step will depend on the architecture of your tests, but the step should:
Go to the CRM URL
Select AccountId in the quick search
Enter the given Account Id in the search box
Click the quick search button
Close the alerts when the show up
If you find yourself writing code that seems to exist in your other steps consider refactoring your code into Page Models, and then initializing those page models and calling methods on them from your step definitions. The basic control flow of your test will go:
Feature file --> Step definition --> Page model --> Selenium --> Web browser

Cucumber Selenium Java-Running Scenarios Outline with multiple examples

Can anyone help me to find solution for the below use case:
Currently I am working on Selenium Automation using Cucumber and I have the below Issue.
I need to automate scenario in web application.
Scenario Outline
Login as "<User>" and purchase items and checkout by selecting "<Option>".
Examples:
|User|
|Arun|
|Ajay|
|Ashok|
Examples
|Option|
|one|
|two|
|Three|
Here the I need to see 9 times running the same scenario till (option 3) for each user.
I mean When Arun login he should checkout and select option one (EG: he place an order without description entered) and then again Arun should login and should checkout and select option two (this time he enters the description and place an order) and then again arun login as select option 3 (EG: Enters description and selects some checkbox and place an order).
This need to repeated for Ajay and Ashok as well. How do I achieve this in Cucumber. Can I use Multiple Examples for single Scenario Outline.
Or Is it possible to have Examples in Background.
This is one of the important use case I need to automate and been trying out with various options in Cucumber. But nothing works.
Thanks in Advance
You can write the scenario outline as given below. it may be useful.
Scenario Outline: Login as <user> and Purchase item with the option <option>
When I login as <user>
And I enter the description <description>
And I checkout the item using the option <option>
Examples:
|user|description|option|
|Arun |Some Desc|One |
|Arun | |One |
|Arun |Some Desc|two |
|Ajay | |three|
|Ajay |Some Desc|two |
|Ajay |Some Desc|three|
|Ashok| |One |
|Ashok|Some Desc|two |
|Ashok|Some Desc|three|
This will run all the steps with different user, description and options.
An idea would be something like this:
Scenario Outline: Login with purchase and checkout
Given I am on the login page
When I log in as "<User>"
And I purchase items
Then I can checkout using the "<Option>"
Examples:
| User | Option |
| Arun | one |
| Arun | two |
| Arun | three |
| Ajay | one |
| Ajay | two |
| Ajay | three |
| Ashok| one |
| Ashok| two |
| Ashok| three |
This will run each option for each user. I don't know how your code looks, but using the above format should be easy to adapt. Check out the documentation as well as how to write good Gherkin
Your step, and the Scenario Outline seem to be doing too much.
If the users have expressly different permissions, or the method of getting to the checkout changes for each of the 3 users, then of course, 9 scenarios may be necessary for the test, if not however, you may only have to write 3 scenarios to test this.
The way I would write this test:
Background:
Given I am logged in as "Arun"
And I have gone to the checkout after selecting various products
When I purchase the items
Scenario Outline: Checkout descriptions
Then I should be able to checkout <with?> a description
Examples:
| with? |
| with |
| without |
Scenario: Checkout with description and accept the terms of service*
Then I should be able to checkout with a description
And I should be able to accept the terms of service*
* Replace "accept the terms of service" with the meaning behind your selecting of the check boxes.
Gherkin is there to bridge the conversational gap between the development team and the business, so making sure that the language used is understandable by a non-technical business person is essential. Leave implementation details out of the feature file, as it is all about describing how the system behaves.
Edit
If there is real business benefit in running the test across the 2 other users (and it isn't solely being run to set up test data, which should be done in a before hook), then perhaps you would need to do something more like this:
Scenario Outline: Checkout descriptions
Given I am logged in as "<user>"
And I have gone to the checkout after selecting various products
When I purchase the items
Then I should be able to checkout <with?> a description
Examples:
| user | with? |
| Arun | with |
| Ajay | with |
| Ashok | with |
| Arun | without |
| Ajay | without |
| Ashok | without |
Scenario Outline: Checkout with description and accept the terms of service*
Given I am logged in as "<user>"
And I have gone to the checkout after selecting various products
When I purchase the items
Then I should be able to checkout with a description
And I should be able to accept the terms of service*
Examples:
| user |
| Arun |
| Ajay |
| Ashok |

Scrapy: Item discrepancy

Scenario: a page with multiple items, each consisting of title, description, image. What happens when one of the items are missing the title? How does scrapy handle it? It seems that scrapy blindly selects all titles //div[id='content']/ul/li/div[id='title']/text(),
Expected output is that that row will have a missing title. But I fear that since it blindly selects all titles on the page without considering the item context. If the 5th item is missing title, wouldn't it mistakenly use the 6th item's title instead?
title1 | description | image
.
.
title4 | description | image
title6 | description | image <--- it's supposed to be missing the title.
| description | image
Does scrapy have a way to deal with this problem?
A workaround I was thinking would be to look at the parent item element, and then, look inside that item. If something is missing don't show it.
there are variety of ways you can handle this situation
1) you can implement a pipeline that can skip items that are not required
2) you can add check in your extraction part to only yield/return an item that is required
you needs to understand Scrapy is a high level crawling Framework , that is also providing builten support for data extraction , you can use any library for extraction you would like to.

Doxygen: Group modules and pages?

I have a question about pages and groups in doxygen.
I have a project, where I grouped classes etc. with the #defgroup and #ingroup cmds. So far this works fine.
Now I'd like to add special documentation to the project with markdown pages. These pages should appear in the dedicated module (group). I tried to create pages with the #page and #subpage cmds. That works fine, but the pages appear plain in the menu.
So I tried to add them to the groups with #ingroup. But that doesn't work as I guessed.
Is it possible to add pages to modules (groups)?
The result should look like this:
Project
|-- Modules
| |-- "Module1"
| | |-- documentation page1 (from *.md file)
| | |-- class documentation
| |-- "Module2"
| | |-- documentation page2
| | |-- class documentation
I hope you can help me!
To group pages you need to use the subpage functionality, no the group.
So create a page for each group that references both subpages and the module group.
/*! \page group1page A documentation page for my group
This page contains the info about group 1 \ref group1_label
\subpage group1page2
\subpage group1page3
*/
http://www.doxygen.nl/manual/grouping.html#subpaging
http://www.doxygen.nl/manual/commands.html#cmdsubpage

How to overwrite some data's in columnFicture?

my ColumnFicture test table look like this:
|categoryId|subcategoryId|showResults?|
| 2 | 1 | |
I overwrite in my ficture code (C#) categoryId (2) if subcategory is more than 0. Is that possible overwrite categoryId on fitnesse test site? That evry one can see what happend.
No, from your fixture code you can not change the test in the FitNesse wiki. A test in the wiki is rendered into HTML, passed to a FitServer, parsed into a tree structure, passed to your fixture which can modify the tree, and then rendered into the test result HTML. So your fixture is too far down the pipeline to access the original wiki test source.