Youtube how to test Hello, friends of software entertainment today I will show you how I do a conception, acceptance test for an e commerce project. In this video we will check our product slider a product overview and product detailed view.
So at first just let us run a single test.
Vendor bin concept run acceptance, steps.
This shows us the steps here on the terminal and html will generate a report for us.
I just press ENTER.
I come to my local page, scroll down and check here on the footer that I can see an imprint And I also will check that.
The href contains the string imprint.
We can open with Google Chrome our report and now we will see the same here on our report.
I am on page start page.
I wait for element footer I scroll to footer. I see imprint and read from the attribute.
I grab attribute from the link the href and the link contains imprint here on my link.
So the green test is okay, Now a short demonstration of what it will look like when a test fails, so that you can see all the features of conception.
We have here Our test in our acceptance, folder navigation, footer, and we will see here that we can just add a simple testify here And now our test will fail.
I put this bit up later.
Our tests fail because we don’t see.
The word testify on the href and when we will check our report, The report will give me a screenshot of the actual page and also will give me the full HTML snapshot here that I can open.
And now I can see here my HTML, And this also will have a nice auto completion here.
So this is really cool to debug things in different environments, because every time we got a screenshot and my HTML to debug it here.
Okay, let’s fix the test back again Now we are green Time to check out the application. This is maybe one of the most unnecessary tests that has ever been written in software development history, because this is super static code in a twig file.
I just wrote a twig file that the imprint has to go to the imprint here, But for today we want to do something on our articles.
Let me introduce you to this webpage Here.
This is a new page with a solution as in combination with the article bundle to bring here used cars.
These are the used cars here, and we have here three features on the page that we want to test today.
The first is here an article slider.
This is on the start page, and this article slider has some features on it.
We will see this later in detail.
The next is a detailed page.
The detail page is actually not ready and finished, but we can test a few things and the third page that I want to test and what is important for me – is the article overview page. What is here We have here our content.
I haven’t implemented the search and filters Here so far, but we can check the columns and the pagination.
These are important features for me and yeah.
Let’s start with this.
So back on the startpage, we will check here our slider.
What is a multi slider? The first thing is that the slider has items.
I think this is a really simple test and it will show that there are items here.
What items are there and what are displayed on my front end? Okay, I go to the terminal and now I say bin vendor codecept.
When you just press ENTER, you have here the commands from conception, and you can say: okay, please generate a test in the acceptance suite what is called slider.
We have different slides here and we have here our startpage. I think: it’s an article and now we have a new codeception test, file I can open it now in, PhPstorm let me check this out here.
Let’s open.
The test here in PhPStorm Here is a little fix on the namespace and then we.
Have here our first test, what is an actual class Where we have the full power of PHP that we want to use here Here is a function that is made before every test In this class.
Every public function is a test You don’t need to write here and test at the end or at the beginning.
So we have here and a support page of our base.
Php file, which is a page object from Conception, and here are some properties Like the URL here:’s, our footer and our footer imprint link.
It is much better to define our HTML markup in this file and then use our variables, because this is much better for reading for us developers and you can.
Change the markup.
Maybe you can also reuse, it on different projects I. Think you will have a newsletter.
Subscription or anything else that you can reuse your code, Okay, so now we just say here we have a public static, start page, and now we have to check what it is.
It’s a slider.
This slider tag, I think, is done by JavaScript, but we have this multiple slider feature with little sliders and we have the items inside.
Let me check our HTML markup for it Slider articular HTML, it’s a snippet, So in the snippet we have here.
Every time this first slider is active and in this there is a slider item.
This is the iteration here.
So this is our slider item and we want to test something on this item.
Okay, so we say here: public static, start page is not right.
It’s on the start page, but it’s just article item that has a selector Our class here So at first we want to test. If these elements are there Okay, so we will inject this base string here and normally I write it as page.
So this is just a convention for me because I always use page here, So I can use different page objects like base category page or whatever, and I can maybe reduce the tests here, because I just inject some other page object For now.
Just realize that I say it’s base page, because this is a page that I am working on and where is it here? Okay, my page now I go to the start.
Page double point double point: URL and now I will wait for our element.
The page slider particular items, and yes now I know that the page is loaded, And I know that 0 article items are not okay.
The next thing is that I want to test here something on our item.
So every item has an image title and price.
The car was the first time on the roads how many kilometres it has and the power of the motor For now.
I just want to check here all elements and check in the first step, if this image here has the page title on the alt tag.
But here is something special because I cut here the title on a specific lengths and I will also show the full last word. This is a very cool feature implemented here Was a custom trick extension.
Maybe we can take a look at it later, but for now you can say that this title is longer than the real title, So I have to check if the alt tag contains the title to check if this feature is working, So I have to think about The name here I think the name can be dated slider items, because there will be a few things that I have to check and first I will get all the items here too And variable I can use here the I grabMultiple and now I just also get My items string from inside And now there is a second variable where I can get more information, And now there is a second parameter where I can get an attribute, But I don’t need it for now, because I want to show you how to work Here from scratch – and the next thing that will happen is that we have a loop here for each items as item Now.
We have here in arrays what is a bit tricky and for now we can say okay now this is an empty statement, but I can set here on record when I want to use breakpoints from the command line.
I have to do here something like export form or to set my Xdebug configuration Here on my command line.
This little snippet here is also a gis.
I will later do a link here on the video description, and so this is all what I have to do to make Xdebug run from my command line and for now I go back to PhPStorm and say here I listen to Xdebug and when I now run This here, so we just makes a slider here we can do and when have been run, we can use this full command here and then just go back to here and say just runs a slider folder.
You also can use the test here, and you also can check here for a simple test to run.
But for me now it’s, okay, to run the slider test, so it will open and wait for the slider element and then it will break here And now I have 45 items.
This is a problem because we have to do a better deal on it here to get our title Okay, but for now this was the first try and we will see that our selector is not working.
Okay, let’s check out for a better selector. We want all the titles here on our elements, so let me check here the title: It’s like the headlines and we can say here: ok, please copy selector, and we will see that we get all these headline elements here.
So we will stop here and our selector.
What is called public static, sliderHeadline and now here we can just say: okay, please give me the selector, and now we see that our selector is not the best, but we have the big deal that we can add here.
Some properties to our HTML markup to make this more effective.
So, where’s this problem here and now we can say ok on the slider item.
We have here our heating and you see here that there is a truncated word filter.
But for now I just add a data cc for Codeception here, and I can say this is my slider article headline, and I will just take this here – is the wrong button.
Okay, and we will see that we also are using here data cc attribute.
I just copy this here also do it here and now I can say: okay.
This is maybe here our slider article headline and now I have here the headline. I also have to remove this here from the copy paste, and maybe now I can get all the headlines as headlines and have no new selector.
It’s a slider article.
We have to build this new slider bar.
I’m taking a headline here and now we will see that we have headlines and we can say as an item.
This is okay for me for now, But it’s going to make it to the headlines And okay, let’s rerun the test.
We have this breakpoint here So far, so good and I hope to get all the headlines Back to PhPStorm and we have no headlines and so after a little analysis here.
I see that there is much JavaScript Voodoo here on the slider and you can say that there are five items loaded Here on the viewport before you see here and one more to the left and the others have some duplication and sometimes they are empty.
As you can see here on the console debugger, You see here a lot of items.
We also need a sector for the image, and we can use this here also from the image – And we can say here is the article image – and we can add this here to our base page object and say: ok, this article image here is no image and Then we can also get all of our images here on our tests, So we can say we just duplicate this line here and say: ok, images as images And on the images we want to have a title.
I’ll take the alt attribute And now let us check here if this makes sense for us as a publisher. I have to break this video here and I think it’s late in the evening.
Its live coding and I want to show you how house, workers and house work feels and how this job is in real life.
So 23 45.
Here this looks good for me, and I hope that I have image text or image text here.
But now I can say: okay number three is good for two and number three years ago for power.
How many seven got seven, I don’t know so much about cars, so this is very good because now we can say we can validate these five items here Now we have these headlines and we can say: okay.
We also use a key here, so we’ll see the right position.
Okay and now we can say I assertSearchContains this needle Now is a headline.
Is the haystack? Is the it’s, not the Imogen stuff? It’s signatures out text.
Now I can say here is images of text and you can say okay here and well, this work. No, this will not work because this is only handling when headline.
So if the headline is empty, then please continue here, so I can set up a whole bunch of conditions.
I can read it very easily and I don’t have to do in other cases where I have logic inside.
I can just say when this is not the case just continue and ok, this will work.
I hope, let’s run.
This argument to pass as it contains must be it’s real string.
Give then okay.
This is wrong.
Assert string contains string needle head stake on the next pitch fan.
For me, I will give you a little beer here: okay, green. The problem now is that I see here as a string contains to engulf and when it will fail.
I don’t know exactly what slider is here, so I can do the most little thing and you can say here.
I have an option to add a message, and I say just can say here: he is dollar key, and now we will have a key here.
Okay, here is a key and now I think we have our first test, because we can see that the title is actually the Alltech of the image in every item here on my slider, so we can just commit some stuff.
Let us see here we do some things, maybe it’s easier to see this here on pitch Pistons.
So on the base template, we add new selectors for the particular article slider.
This is okay here base dot PHP file, and we also adds here some data.
Cue attributes I sing for our, so the back, you get you beautiful article, Chimere them and we adhere and stoppage article cyst says so here we go so let’s make a little break and see what we’ve done here.
We add a new test here: it’s, our stoppage article cyst and it’s waiting first page and for the elements of the slower article item, and then we validate the slider items.
For now. We only validate that our headlines.
Our part of the alt tag on the images for our co friendly page and we iterate on this headlines, guarantee here and then we got the headline.
There are very much elements.
What are not filled in the initial state of the page and the slider is a yellow script and we’ll make this later.
So we have to skip this empty elements here, and we can say we do will continue here because we can now handle here.
Anything what’s is not working so good for us, and we have it clear on this part of the voyage statement.
So we don’t have to do very much.
It’ll else.
Statements done on the logical part.
We just say when something is wrong here, please continue. This is very easy to read for us and after that we can say.
Okay, here we have an asset in contain string for the headline and we will check if this is part of the AlphaTech of the image and for better overview.
We give this message here to our terminal that we can see what he has maybe problems here.
So let’s check what else we can check here on this item now we see here that is there a surprise and some properties.
We can check this properties here as they are working for now.
We will see that here are a few elements that don’t have any kilometers, and here are elements that have kilometers, and maybe this is a bit boring when we check through this detail stuff.
So maybe it’s more important to check if the link here is working because we already have the title and when we click here, we can check that this title will be here on our headline.
So let’s think about to realize this test.
I think this is a new test, because we don’t need to validate here slot items, but we do something similar, because now we will get the highest.
I don’t want to work with some click element here to click the slider elements, because we have the super dynamic, JavaScript slider and I think for me it’s easier to get the halves of every item here. So we will very day to know that the public function thirty days, slider URLs working and have the right type slurs.
And yes, we also have here our acceptance test.
What we need as dollar.
I, and I also need our base page object for our dollar page sing, so we will get our hammers.
Let me check the a text around the image we have here our image, and so we just adhere and you got a CC with article a tag and now we can wrap the house as a beautiful it’s, because now we have here this image and Maybe it’s the Buffs image, so we say check now we will go back to our test and say: ok, please.
This page is now already loaded because our before will run before every public function or every test.
Here we have here also in settings that it will not reload every time the browser this is a default setting.
We can also say we want to reload the browser every time and we want to clear all cookies and all the stuff, but for now I want this with chrome session to be permanent open.
This is a bit faster for me and I have two page double point double points, and we have this a check here and from this I take we want to get, and we also want to get the images of text like here, because this is a full Page title and not the shoulders page title from the slider headline and now we will check what will happen here because we have to iterate through the Harris Justin for each with key statements, which was key.
Adamson use it so often so for that index. For me and that’s our F and URL, and I have to wait for something it’s called here:’s headline.
Okay.
Now we have a new selector.
I think here on this little project we can handle our stuff object.
Public check.
This is not the best selector here.
We also add better selector.
So let’s open the template from it.
So let’s check our template here for our article default and we have this little hairs for H window here h4.
We have this title here and we wait and deficit C as you do what we call title. So we have this title here now and now we go back to our base, page object and say: ok, please remove this horrible stuff and edge here, something we can read and understand.
Yes, and this makes us of tests much better.
So now we have to see em and we go to test and say: okay, we say is the same than on our interpreters of text, so we can say here that asserts same expected and actual expected.
This images take with our key and we have here our headline and we can say: ok, please give me here, we will see in the habit and we will have much informations, but maybe we also want to see here.
Okay, now it’s time to run a specific test here.
We copy this name here and we can say here: okay, just please and we have and just like this, and it only will run this specific test.
Okay, let us commit here something fast.
We make something on the tip template and something on the test here also, I fix some sing on the importer because there were some spaces and some tricky issues here, but I don’t want to show you because this was really unnecessary stuff and I say Just premiered actuarial stage for YouTube video.
For now, because now we can say hey everything for the start: page slider works for me.
We checked an attribute and we check cell phone functionality. If we can click it and see you can say when there no items loaded.
So far – and this is a bit a trick here – what will happens when there will be no items it can be when the full import fails? There will be, you know, items here.
So for me, I just move.
Is this because it’s when there are no articles, we don’t have some full bags that we say hey.
Please come back later.
We have here some nice cars and now we will just remove this here and we will run all our slide sets, and this can be.
That is a little problem.
Let’s check it out.
I think it is working because the first test is waiting for things that have to be loaded and it’s a ok.
I ran a time out, and this was also the last thing. What we have to prove here that this will work when there are no articles for now.
The slider testing, for me is ok and it works for me.
Also, it’s a bit faster good, so the overview page is here, and what we want to check here is one thing is the paging, and I think this is last single for this video tutorial, because I spent here a lot of times even in to Fix some unnecessary and super annoying things.
I want to check if this car here has another title on page 2: ok, so it could be use.
If this is same here, we can check subtitles if there something similar.
We have this Passat variant and we have this part variant, but maybe we can say we don’t have the same price.
Otherwise I had to add here the article ID what I also can do on a hidden field.
I think maybe this is easier for me, because we need also this article, ideally maybe later so, let’s go superfast to our article overview and it here’s some hidden field.
This is a paging under the paging articles here for articles item.
We have here some title, you and we can say: okay just adhere didn’t field, he gets, but let’s type in. I will say this: we will check this works or particularly was a white.
Well you and me now.
This is definitely unique ID for me, so we will add a new test here for our overview, intercept, generates, says acceptance and it’s.
Maybe we have here detailed overview, and so I can say he gets over mu obsessed.
You know it’s generated and we have, I will be obsessed and we have the same procedure as every time we gets here today,’s as the page property, and when we go to this, I think it’s.
Just you,’re both wrong.
Okay – and we have here’s this and your selector, what is just particularly okay, now we can get all of this article IDs of the first page wait for element.
We just have to go into double points.
I hope that scan conception can wait for on hidden elements.
I don’t know exactly, but it’s here,’s the article IDs and I want to first. Let me show you later the full HTML we caught, because this name will be transformed to little sense.
First of all, say: article IDs reform will not work on multiple items, multiple, and I hope that I can grab here also value.
We will see if this works, and so this will also one so with a bit of luck.
This will be our first page ID.
So now I have to go to the second page.
I can do this on the URL.
You see there’s just a parameter page two here on this part, but I can also say hey, please let me click this link here.
This is vector as easy as I think now, so we can say nation second item.
This is so bad bus and I do oh, this is hot.
This is okay. We expect somebody here and say this will be just don’t know how to write it.
The CL ends – and I make an ID but but 90 is unique.
So I just make to the front end.
Also it’s super important to make clear selectors.
We have here now or page numbers and we say okay mean ID with accreditation tone.
Okay, so now I can say second item to create.
Then I also have to wait for this here and after that I can say: okay use me is the same single year as the second patient ID spoke to mrs Work, and now I can say I see it’s not the same expected this first.
We have to ready Davies, we can say: okay, we have this obstacle, you will see wow.
This was great and I can also say that this works because you can see here is 1.
3. 4.
2.
2.
2 H is different to one two: six, nine, nine.
Four six, we can say here we are on edge from one and say I don’t already have we lower this to check.
This is a page number part.
We have here this one straight forward to the two eight page: two.
We have here one two.
Six, nine four six and this is working perfect, so we also checked here our navigation, let’s come into stuff, okay.
This looks good for me, so for now let’s run all the tests, because this makes a bit of fun here. Let me check what we have to remove just the article, so maybe it’s for big items.
I just have to go to the BI modes.
I delete some words and now all my tests with one – and i will see the steps here on my terminal – and this is a patient s, so we have here 18 seconds and have two really good tests here.
Let’s check it here we have well.
We have four tests, you just put the test, actually not the most particular test, but this test is better than nothing in tested and it’s also good find if your start page is loading, and so maybe this is some kind of the simplest test that Will work? We have many dates slightly well as out working and hair for rights titles.
Now you see why I’m using this very metal tool names because it’s – something not gherkin like, but anybody who reaches hopefully will understand this, and here we see what happens and now we have here also the very date of the slider items.
This is that we have to check just only the AlphaTech, but in the future we will do here more things and on the all of you assess.
We will also check that the first eye to their article ID is different to page two.
Maybe you can make a lot of sense here, but I’m on the bottom are check, sir article ID and later I have this here, so thank you for this video.
Now you can start testing you web pages with conceptions. You see here on this video how to get out of trouble and how to avoid trouble, make good selectors and the good loading time for your tests, and then they will bring you a lot of fun and healthy to your walk into your life.
And please follow this channel here, check out the descriptions and stay green.
Thank you.
You .
