title
React Testing Course for Beginners โ Code and Test 3 Apps
description
In this React testing course, you will learn how to code, test, and deploy 3 different React apps. You will learn how to use React Testing Library, write end-to-end visual tests, and develop comprehensive test strategies. You will also learn how to use testing tools such as Happo.io, Cypress, and Jest.
๐ป GitHub Links:
1: https://github.com/nadvolod/react-web-app
2: https://github.com/nadvolod/js-code/tree/master/birthday-reminder
3: https://github.com/nadvolod/js-code/tree/master/dev-portfolio
โ๏ธ Nikolay Advolodkin created this course. Check out his channel: https://www.youtube.com/ultimateqa
๐ฅ Subscribe to Nikolay's weekly email on JavaScript testing: https://ultimateqa.ck.page/js-testing-tips
๐ Nikolay's blog: https://ultimateqa.com/blog
โญ๏ธ Course Contents โญ๏ธ
(0:00:00) Introduction
(0:01:47) Creating A React App and Deploy to Microsoft Azure
(0:42:14) Birthday Reminder React App with Full Testing
(1:18:29) Build & Test A Portfolio Website
๐ Thanks to our Champion and Sponsor supporters:
๐พ Raymond Odero
๐พ Agustรญn Kussrow
๐พ aldo ferretti
๐พ Otis Morgan
๐พ DeezMaster
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
detail
{'title': 'React Testing Course for Beginners โ Code and Test 3 Apps', 'heatmap': [{'end': 461.775, 'start': 226.934, 'weight': 0.756}, {'end': 747.564, 'start': 671.273, 'weight': 0.841}, {'end': 1268.634, 'start': 1179.867, 'weight': 1}], 'summary': 'A comprehensive 9-chapter react testing course covers coding, deploying, and testing 3 react apps, visual testing for web apps, azure deployment, web app component implementation, webdriver.io setup, browser testing, next.js portfolio setup, and the importance of automated visual and functional testing.', 'chapters': [{'end': 311.072, 'segs': [{'end': 81.903, 'src': 'embed', 'start': 25.222, 'weight': 0, 'content': [{'end': 29.265, 'text': "Next, we're going to use react testing library to write a few unit tests.", 'start': 25.222, 'duration': 4.043}, {'end': 32.448, 'text': "Afterwards, we're going to learn how to write end to end visual tests.", 'start': 29.626, 'duration': 2.822}, {'end': 37.072, 'text': "And then finally, we're going to take that application and deploy it to Microsoft Azure.", 'start': 32.868, 'duration': 4.204}, {'end': 44.614, 'text': "In the second part of the tutorial, we're going to learn how to create a beautiful birthday reminder application with some static data.", 'start': 37.652, 'duration': 6.962}, {'end': 49.116, 'text': "It's going to be very simple, but we're going to build upon the skills that we learned in the first tutorial.", 'start': 45.114, 'duration': 4.002}, {'end': 54.197, 'text': "Next, we're going to think about a comprehensive test strategy for this web application.", 'start': 49.756, 'duration': 4.441}, {'end': 60.139, 'text': "And then finally, we're going to write those tests and run them against our birthday reminder web app.", 'start': 54.217, 'duration': 5.922}, {'end': 64.024, 'text': "In the third and final tutorial, that's actually my favorite one.", 'start': 60.519, 'duration': 3.505}, {'end': 66.426, 'text': "And I think you're really going to enjoy it as well.", 'start': 64.263, 'duration': 2.163}, {'end': 72.854, 'text': 'You will build a beautiful dev portfolio website that you can use to show off your developer skills.', 'start': 66.987, 'duration': 5.867}, {'end': 76.899, 'text': "We're going to code a lot of different components for this web application.", 'start': 72.994, 'duration': 3.905}, {'end': 81.903, 'text': 'But the tutorial is mostly going to be focused around a testing strategy.', 'start': 77.019, 'duration': 4.884}], 'summary': 'Tutorial covers unit tests, end to end visual tests, deployment to microsoft azure, creating a birthday reminder app, comprehensive test strategy, and building a developer portfolio website.', 'duration': 56.681, 'max_score': 25.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U25222.jpg'}, {'end': 201.617, 'src': 'embed', 'start': 171.178, 'weight': 3, 'content': [{'end': 180.746, 'text': "Wonderful So once that's done downloading and installing, you can see a bunch of commands that create react app provides for us to get started.", 'start': 171.178, 'duration': 9.568}, {'end': 184.57, 'text': 'And they tell us exactly what we can do is to CD to my app.', 'start': 180.866, 'duration': 3.704}, {'end': 189.05, 'text': 'And then in my app.', 'start': 187.009, 'duration': 2.041}, {'end': 201.617, 'text': 'you can see now, if we open this up, we now have a my app folder, has its own node modules, has a bunch of code here that we will explore in a moment.', 'start': 189.05, 'duration': 12.567}], 'summary': 'Create react app provides commands for creating a project with its own node modules and code.', 'duration': 30.439, 'max_score': 171.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U171178.jpg'}, {'end': 279.868, 'src': 'embed', 'start': 240.543, 'weight': 4, 'content': [{'end': 251.561, 'text': "If we look at package dot JSON, we can see that if we run a npm test command, it's going to run some tests.", 'start': 240.543, 'duration': 11.018}, {'end': 258.166, 'text': 'And so what we can do is open up a new tab here and do npm test.', 'start': 252.201, 'duration': 5.965}, {'end': 267.453, 'text': "And that's going to execute a unit test here that we have an app dot test dot j s.", 'start': 260.107, 'duration': 7.346}, {'end': 272.496, 'text': 'And this test is actually using a react testing library.', 'start': 267.453, 'duration': 5.043}, {'end': 279.868, 'text': 'But what you can see here is we have a test that will render the learn react link.', 'start': 273.382, 'duration': 6.486}], 'summary': "Running 'npm test' executes a unit test using react testing library.", 'duration': 39.325, 'max_score': 240.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U240543.jpg'}], 'start': 0.229, 'title': 'React app development & testing course and creating react app tutorial', 'summary': 'Covers a three-part course on coding, deploying, and testing three react applications, including creating a simple react app, writing unit tests using react testing library, and deploying to microsoft azure, with a focus on testing strategy and tools like apple io, cypress, and jest. it also includes setting up a new react app, using create react app to create a new application, starting and testing the app, and exploring the provided commands and tests.', 'chapters': [{'end': 103.916, 'start': 0.229, 'title': 'React app development & testing course', 'summary': 'Covers a three-part course on coding, deploying, and testing three react applications, including creating a simple react app, writing unit tests using react testing library, and deploying to microsoft azure, with a focus on testing strategy and tools like apple io, cypress, and jest.', 'duration': 103.687, 'highlights': ['Nikolay is the founder of Ultima QA and is a popular instructor on software testing, creating tutorials at Ultimate QA YouTube channel.', 'The course includes creating three React applications, writing unit tests, end to end visual tests, and deploying to Microsoft Azure.', 'In the second part, a birthday reminder application with static data will be created, followed by a comprehensive test strategy and running tests against the app.', 'The third part focuses on building a developer portfolio website with a testing strategy and tools such as Apple IO, Cypress, and Jest for component and unit testing.']}, {'end': 311.072, 'start': 104.196, 'title': 'Creating react app tutorial', 'summary': 'Covers setting up a new react app, using create react app to create a new application, starting and testing the app, and exploring the provided commands and tests.', 'duration': 206.876, 'highlights': ['The chapter covers setting up a new React app, using create react app to create a new application, starting and testing the app, and exploring the provided commands and tests.', "The create react app provides commands for setting up and testing the app, such as 'npm test' to execute unit tests using react testing library.", 'The tutorial demonstrates the process of creating a new React application using create react app, including installing and initializing the app.', "The tutorial explains the process of starting and testing the React app, including executing unit tests using 'npm test' and the react testing library."]}], 'duration': 310.843, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U229.jpg', 'highlights': ['The course includes creating three React applications, writing unit tests, end to end visual tests, and deploying to Microsoft Azure.', 'The third part focuses on building a developer portfolio website with a testing strategy and tools such as Apple IO, Cypress, and Jest for component and unit testing.', 'The second part involves creating a birthday reminder application with static data, followed by a comprehensive test strategy and running tests against the app.', 'The chapter covers setting up a new React app, using create react app to create a new application, starting and testing the app, and exploring the provided commands and tests.', "The create react app provides commands for setting up and testing the app, such as 'npm test' to execute unit tests using react testing library."]}, {'end': 1741.552, 'segs': [{'end': 747.564, 'src': 'heatmap', 'start': 671.273, 'weight': 0.841, 'content': [{'end': 676.516, 'text': 'And if you want to be notified of every time a new tutorial is released, hit the subscribe button.', 'start': 671.273, 'duration': 5.243}, {'end': 678.217, 'text': "Let's call it ci.yaml.", 'start': 676.596, 'duration': 1.621}, {'end': 694.567, 'text': "It will look exactly as I showed you here, I actually named it to ci two, so that we can see, let's quit our tests and do and do a push.", 'start': 683.42, 'duration': 11.147}, {'end': 705.839, 'text': 'And once we do a push, that should start executing our CI pipeline.', 'start': 700.894, 'duration': 4.945}, {'end': 707.641, 'text': "Let's come and take a look at that.", 'start': 706.3, 'duration': 1.341}, {'end': 712.266, 'text': "We'll see that I have this new branch open.", 'start': 710.144, 'duration': 2.122}, {'end': 715.249, 'text': "So let's go ahead and do a PR with this branch.", 'start': 712.326, 'duration': 2.923}, {'end': 730.709, 'text': 'I made one mistake here, I should have put GitHub workflows in the very root, not inside of my app.', 'start': 724.304, 'duration': 6.405}, {'end': 735.794, 'text': "So what you'll see is I moved that to the correct location did another push.", 'start': 730.729, 'duration': 5.065}, {'end': 740.558, 'text': 'And so now we have a CI pipeline that started executing.', 'start': 736.294, 'duration': 4.264}, {'end': 744.961, 'text': "Here's the name called ci to exactly the name that we gave it in the YAML file.", 'start': 740.598, 'duration': 4.363}, {'end': 747.564, 'text': 'And it did fail after nine seconds.', 'start': 745.302, 'duration': 2.262}], 'summary': 'A ci pipeline named ci.yaml failed after 9 seconds.', 'duration': 76.291, 'max_score': 671.273, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U671273.jpg'}, {'end': 1056.789, 'src': 'embed', 'start': 1022.139, 'weight': 4, 'content': [{'end': 1031.681, 'text': 'However, the this exercise also showed us that having text as a check in our test is not really a good strategy,', 'start': 1022.139, 'duration': 9.542}, {'end': 1035.801, 'text': 'because we can often change the text of our links.', 'start': 1031.681, 'duration': 4.12}, {'end': 1043.404, 'text': 'And so we can instead use a better strategy, such as supplying a data dash attribute.', 'start': 1036.142, 'duration': 7.262}, {'end': 1047.085, 'text': 'And so here we can do a data dash test ID.', 'start': 1044.204, 'duration': 2.881}, {'end': 1051.887, 'text': 'And we can call it a learn link.', 'start': 1048.786, 'duration': 3.101}, {'end': 1056.789, 'text': "We'll hit save here, we'll come back to app that test.", 'start': 1052.948, 'duration': 3.841}], 'summary': 'Using data attributes instead of text in tests can be a better strategy for link testing.', 'duration': 34.65, 'max_score': 1022.139, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U1022139.jpg'}, {'end': 1268.634, 'src': 'heatmap', 'start': 1170.212, 'weight': 2, 'content': [{'end': 1178.814, 'text': "We're going to use WebDriver IO and shift right by testing our rendered application later in the stage of the development cycle.", 'start': 1170.212, 'duration': 8.602}, {'end': 1195.699, 'text': "And we're going to use visual snapshots to check our application in different resolutions in the browser to make sure that our app is responsive and that it looks correct on different types of devices.", 'start': 1179.867, 'duration': 15.832}, {'end': 1198.941, 'text': 'And for that we are going to use WebDriver IO.', 'start': 1196.439, 'duration': 2.502}, {'end': 1201.103, 'text': "Let's install WebDriver IO.", 'start': 1199.621, 'duration': 1.482}, {'end': 1206.967, 'text': "Let's configure WebDriver IO.", 'start': 1204.865, 'duration': 2.102}, {'end': 1214.667, 'text': "you're going to get a nice handy menu that allows it allows you to decide what you're going to do.", 'start': 1209.383, 'duration': 5.284}, {'end': 1218.13, 'text': "So we're going to execute in the cloud using Sauce Labs.", 'start': 1215.248, 'duration': 2.882}, {'end': 1224.215, 'text': 'Yes, this will be our username.', 'start': 1220.732, 'duration': 3.483}, {'end': 1226.437, 'text': 'And this will be our access key.', 'start': 1224.756, 'duration': 1.681}, {'end': 1229.74, 'text': "No, we don't want to do that, which is the default.", 'start': 1227.538, 'duration': 2.202}, {'end': 1251.316, 'text': "Once you've selected all the options, now you're going to wait for WebDriver IO to install all the appropriate packages.", 'start': 1244.298, 'duration': 7.018}, {'end': 1261.673, 'text': "So once all the installation is done, the only other thing that you'll need to install is the WDIO sync service.", 'start': 1255.191, 'duration': 6.482}, {'end': 1268.634, 'text': 'And so once you have everything installed, this is what our package JSON looks like everything that we added.', 'start': 1262.333, 'duration': 6.301}], 'summary': 'Using webdriver io, configure and run tests on different resolutions with visual snapshots to ensure responsive application. utilize sauce labs for cloud execution.', 'duration': 28.729, 'max_score': 1170.212, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U1170212.jpg'}, {'end': 1439.582, 'src': 'embed', 'start': 1408.615, 'weight': 3, 'content': [{'end': 1412.938, 'text': "So I'm running this on the two of the most popular browser resolutions.", 'start': 1408.615, 'duration': 4.323}, {'end': 1417.2, 'text': 'The very first one is this one here.', 'start': 1413.318, 'duration': 3.882}, {'end': 1425.816, 'text': 'this viewport size, which is the most popular desktop and running on Windows 10 and Chrome.', 'start': 1419.734, 'duration': 6.082}, {'end': 1436.22, 'text': "and then the other type of browser that we're running on is Mac OS Safari on this resolution, which is an iPhone X viewport size,", 'start': 1425.816, 'duration': 10.404}, {'end': 1439.582, 'text': 'and of course we can have a lot more resolutions here.', 'start': 1436.22, 'duration': 3.362}], 'summary': 'Testing on popular browser resolutions: windows 10/chrome and mac os/safari/iphone x viewport.', 'duration': 30.967, 'max_score': 1408.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U1408615.jpg'}, {'end': 1617.837, 'src': 'embed', 'start': 1587.321, 'weight': 0, 'content': [{'end': 1590.244, 'text': "we've got a new commit here for adding visual tests.", 'start': 1587.321, 'duration': 2.923}, {'end': 1592.887, 'text': 'And here is our CI pipeline executing.', 'start': 1590.645, 'duration': 2.242}, {'end': 1601.717, 'text': "So here's our pipeline after execution, we can see our visual tests have executed successfully with a checkmark.", 'start': 1595.711, 'duration': 6.006}, {'end': 1605.802, 'text': 'And if we scroll all the way down, we can see that two tests have passed.', 'start': 1602.278, 'duration': 3.524}, {'end': 1611.312, 'text': 'So the current version of our application.', 'start': 1609.571, 'duration': 1.741}, {'end': 1612.834, 'text': "it's a little boring, right?", 'start': 1611.312, 'duration': 1.522}, {'end': 1617.837, 'text': "Let's make it a little bit better and actually see the power of visual testing.", 'start': 1612.934, 'duration': 4.903}], 'summary': 'Visual tests added, 2 tests passed, aiming for better application with visual testing', 'duration': 30.516, 'max_score': 1587.321, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U1587321.jpg'}, {'end': 1745.755, 'src': 'embed', 'start': 1717.28, 'weight': 1, 'content': [{'end': 1719.544, 'text': "Let's take a look and see exactly what happened.", 'start': 1717.28, 'duration': 2.264}, {'end': 1728.244, 'text': 'And so what screener shows is two visual changes that have occurred, as screener uses a smart hybrid div,', 'start': 1720.839, 'duration': 7.405}, {'end': 1731.406, 'text': 'meaning that it analyzes the DOM and element shifts.', 'start': 1728.244, 'duration': 3.162}, {'end': 1735.488, 'text': 'And it identifies exactly the two elements that we have changed.', 'start': 1732.086, 'duration': 3.402}, {'end': 1739.291, 'text': "And so now it's for us to decide whether this is a valid change or not.", 'start': 1735.849, 'duration': 3.442}, {'end': 1741.552, 'text': 'And yes, this is a valid change.', 'start': 1739.851, 'duration': 1.701}, {'end': 1742.853, 'text': 'And it looks fantastic.', 'start': 1741.672, 'duration': 1.181}, {'end': 1745.755, 'text': 'And we want to use this as the new version of the baseline.', 'start': 1742.993, 'duration': 2.762}], 'summary': 'Screener identified two valid visual changes in the dom.', 'duration': 28.475, 'max_score': 1717.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U1717280.jpg'}], 'start': 311.532, 'title': 'Visual testing for web applications', 'summary': 'Covers setting up visual testing for web applications, running tests on multiple platforms, integrating visual testing into the ci pipeline, and identifying visual changes with quantifiable data such as tests passed and visual changes detected.', 'chapters': [{'end': 503.048, 'start': 311.532, 'title': 'Setting up ci with github actions', 'summary': 'Discusses setting up a unit test that can run regardless of the application status, creating a ci pipeline with github actions for node js, and configuring environment variables using secrets in github actions.', 'duration': 191.516, 'highlights': ['Setting up a unit test that can run regardless of the application status The unit test can run regardless of whether the application is up or not, providing continuous testing capabilities even when the application is closed down.', 'Creating a CI pipeline with GitHub Actions for Node JS The process involves navigating to the Actions tab in the GitHub repo, selecting a suggested workflow for Node JS, and using the built-in YAML file editor to configure the CI pipeline with automatic error highlighting.', 'Configuring environment variables using secrets in GitHub actions The transcript details the process of setting environment variables such as screener API key, sauce username, and sauce access key using secrets in GitHub actions, including where the values are retrieved and stored.']}, {'end': 842.097, 'start': 505.074, 'title': 'Setting up ci pipeline for node app', 'summary': 'Discusses setting up a ci pipeline for a node.js application using github actions, including defining jobs, installing dependencies, building the app, executing component tests, and starting the application, resulting in successful execution of the ci pipeline with component tests running.', 'duration': 337.023, 'highlights': ['Successfully executed CI pipeline with component tests running. The CI pipeline was able to build the app, start it up, and run component tests.', "Recommended using 'npm ci' for faster dependency installation in GitHub Actions. Using 'npm ci' for dependency installation in GitHub Actions is recommended for faster performance and caching of dependencies.", 'Defined jobs, including running on Ubuntu latest and using node version 14. The defined jobs included running on Ubuntu latest and using node version 14 for the CI pipeline.']}, {'end': 1169.732, 'start': 842.177, 'title': 'Testing url and application rendering', 'summary': 'Discusses testing the correctness of a url and updating the application to navigate to the correct url, followed by ensuring the application renders correctly on web and mobile using different technologies.', 'duration': 327.555, 'highlights': ["The application's URL testing is validated using a component test with React Testing Library, where the URL is confirmed to navigate to the correct location. The URL is verified to navigate to ultimateqa.com, resulting in successful tests after updating the application's URL in app.js.", "Implementing a better testing strategy by using a data-dash attribute instead of relying on specific text checks, ensuring the tests continue to work even if the text changes. A data-dash test ID ('learn link') is added, enabling the tests to use get by ID instead of get by text, resulting in passing tests even after changing the link text.", 'Successful execution of the CI pipeline after pushing the updates, indicating a successful testing journey for URL correctness and application rendering. The CI pipeline executes successfully after pushing the updates, marking progress in the testing journey for URL correctness and application rendering.']}, {'end': 1439.582, 'start': 1170.212, 'title': 'Visual testing with webdriver io', 'summary': 'Covers the implementation of visual testing using webdriver io, including the use of visual snapshots to check application responsiveness and the setup of different browser and operating system configurations for testing purposes.', 'duration': 269.37, 'highlights': ['The chapter covers the implementation of visual testing using WebDriver IO The chapter focuses on implementing visual testing using WebDriver IO for testing the rendered application in the later stage of the development cycle.', "Use of visual snapshots to check application responsiveness Visual snapshots are utilized to ensure the application's responsiveness and appearance on different devices and resolutions, enhancing the user experience and compatibility.", 'Setup of different browser and operating system configurations for testing purposes The configuration includes running tests on popular browser resolutions such as Windows 10 and Chrome, as well as Mac OS Safari on iPhone X viewport size, ensuring comprehensive testing across different platforms and devices.']}, {'end': 1741.552, 'start': 1439.582, 'title': 'Visual testing for web applications', 'summary': 'Discusses the process of setting up visual testing for web applications, including running tests on multiple platforms simultaneously, accepting and setting baselines for new snapshots, integrating visual testing into the ci pipeline, and identifying visual changes in the application with quantifiable data such as the number of tests passed and visual changes detected.', 'duration': 301.97, 'highlights': ['Setting up visual testing for web applications by running tests on multiple platforms simultaneously, accepting and setting baselines for new snapshots, and integrating visual testing into the CI pipeline, resulting in successful execution of tests with a checkmark and passing of two tests in the CI pipeline.', 'Identifying visual changes in the application, such as two visual changes detected by the screener tool, which uses a smart hybrid div to analyze the DOM and element shifts to determine valid changes.']}], 'duration': 1430.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U311532.jpg', 'highlights': ['Setting up visual testing for web applications by running tests on multiple platforms simultaneously, accepting and setting baselines for new snapshots, and integrating visual testing into the CI pipeline, resulting in successful execution of tests with a checkmark and passing of two tests in the CI pipeline.', 'Identifying visual changes in the application, such as two visual changes detected by the screener tool, which uses a smart hybrid div to analyze the DOM and element shifts to determine valid changes.', 'The chapter covers the implementation of visual testing using WebDriver IO for testing the rendered application in the later stage of the development cycle.', 'Setup of different browser and operating system configurations for testing purposes, including running tests on popular browser resolutions such as Windows 10 and Chrome, as well as Mac OS Safari on iPhone X viewport size, ensuring comprehensive testing across different platforms and devices.', 'Implementing a better testing strategy by using a data-dash attribute instead of relying on specific text checks, ensuring the tests continue to work even if the text changes.']}, {'end': 2124.265, 'segs': [{'end': 1822.483, 'src': 'embed', 'start': 1741.672, 'weight': 0, 'content': [{'end': 1742.853, 'text': 'And it looks fantastic.', 'start': 1741.672, 'duration': 1.181}, {'end': 1745.755, 'text': 'And we want to use this as the new version of the baseline.', 'start': 1742.993, 'duration': 2.762}, {'end': 1753.1, 'text': "So we're going to accept this one, looking at this page here, we like all of the changes here as well.", 'start': 1746.115, 'duration': 6.985}, {'end': 1754.981, 'text': 'And we can accept that as well.', 'start': 1753.36, 'duration': 1.621}, {'end': 1762.186, 'text': 'And with all of that said, we are pretty far down in our coding and testing journey.', 'start': 1755.881, 'duration': 6.305}, {'end': 1767.129, 'text': 'we validated pretty much everything about our application.', 'start': 1762.186, 'duration': 4.943}, {'end': 1773.213, 'text': 'we validated that the app renders correctly and that the app looks as expected.', 'start': 1767.129, 'duration': 6.084}, {'end': 1781.624, 'text': 'on the web and mobile using our visual DOM two database tests, also known as end to end tests.', 'start': 1775.828, 'duration': 5.796}, {'end': 1783.809, 'text': 'And we did it with the following technologies.', 'start': 1782.025, 'duration': 1.784}, {'end': 1796.142, 'text': 'So how awesome would it be if we can actually deploy this application and then test it in a real production environment?', 'start': 1789.457, 'duration': 6.685}, {'end': 1803.868, 'text': 'Well, we can actually do that using Microsoft Azure and we are going to use their Azure static web apps feature.', 'start': 1796.563, 'duration': 7.305}, {'end': 1817.579, 'text': 'Their Azure static web apps feature is basically a simple way to deploy applications without having to worry about infrastructure and regions and a bunch of other stuff.', 'start': 1804.289, 'duration': 13.29}, {'end': 1820.482, 'text': "But basically, you'll see it's a very easy way to make this possible.", 'start': 1817.599, 'duration': 2.883}, {'end': 1822.483, 'text': "So we're going to go ahead and do that.", 'start': 1820.602, 'duration': 1.881}], 'summary': 'Validated app rendering on web and mobile, ready to deploy using azure static web apps.', 'duration': 80.811, 'max_score': 1741.672, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U1741672.jpg'}, {'end': 1863.124, 'src': 'embed', 'start': 1842.213, 'weight': 4, 'content': [{'end': 1851.466, 'text': "So here in your Visual Studio code, you're going to come to extensions and install Azure static web apps extension.", 'start': 1842.213, 'duration': 9.253}, {'end': 1856.356, 'text': 'Once you have Azure static web apps, you will have this little icon Azure.', 'start': 1852.432, 'duration': 3.924}, {'end': 1863.124, 'text': "you'll come in there, you'll come into static web apps and you'll click the plus symbol to add a new Azure static web app.", 'start': 1856.356, 'duration': 6.768}], 'summary': 'Install azure static web apps extension in visual studio code and add a new azure static web app.', 'duration': 20.911, 'max_score': 1842.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U1842213.jpg'}, {'end': 1938.085, 'src': 'embed', 'start': 1912.876, 'weight': 5, 'content': [{'end': 1922.919, 'text': "inside of our GitHub project, we see that we have a new action that was added, and it's called Azure static web apps workflow.", 'start': 1912.876, 'duration': 10.043}, {'end': 1931.741, 'text': "And basically, Microsoft Azure added a new YAML file that it's calling right here, Azure static web apps, blah, blah, blah.", 'start': 1923.419, 'duration': 8.322}, {'end': 1938.085, 'text': 'And so then this has a configuration for building and deploying our application.', 'start': 1932.421, 'duration': 5.664}], 'summary': 'A new azure static web apps workflow was added to the github project, providing configuration for building and deploying the application.', 'duration': 25.209, 'max_score': 1912.876, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U1912876.jpg'}], 'start': 1741.672, 'title': 'Deployment progress and azure deployment', 'summary': 'Highlights the successful validation and deployment progress of the application for web and mobile, and discusses deploying a react web app with azure, including account setup, configuration, build automation, and production environment testing.', 'chapters': [{'end': 1796.142, 'start': 1741.672, 'title': 'Validation and deployment progress', 'summary': "Highlights the successful validation of the application's rendering and appearance on web and mobile using visual dom and end to end tests, and the progress towards deploying the application in a real production environment.", 'duration': 54.47, 'highlights': ["The successful validation of the application's rendering and appearance on web and mobile using visual DOM and end to end tests.", 'The progress towards deploying the application in a real production environment.', 'The decision to use the new version of the baseline for the application.']}, {'end': 2124.265, 'start': 1796.563, 'title': 'Deploying react web app with azure', 'summary': 'Discusses deploying a react web app with azure static web apps, including creating an azure account, using visual studio code to install the azure static web apps extension, configuring the web app, automating the build and deployment process, and updating the app for production environment testing.', 'duration': 327.702, 'highlights': ['The Azure static web apps feature simplifies application deployment without the need to manage infrastructure and regions, making it very easy to deploy applications.', 'To deploy a React web app with Azure, one needs to create an Azure account, install the Azure static web apps extension in Visual Studio Code, configure the web app by specifying the project type, source code location, and build output location.', 'The Azure static web apps workflow automatically adds a YAML file for building and deploying the application, with the most important step being the deployment of the web app to a dynamically generated URL.', "The process includes automatically adding a settings.json file, which specifies the app's location and build output, with the build and deployment process being set up automatically by Azure Static Web Apps.", 'The chapter also covers updating the app for production environment testing by making changes to the application, such as updating an image, and discussing the need for writing tests for the production environment.']}], 'duration': 382.593, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U1741672.jpg', 'highlights': ["The successful validation of the application's rendering and appearance on web and mobile using visual DOM and end to end tests.", 'The progress towards deploying the application in a real production environment.', 'The decision to use the new version of the baseline for the application.', 'The Azure static web apps feature simplifies application deployment without the need to manage infrastructure and regions, making it very easy to deploy applications.', 'To deploy a React web app with Azure, one needs to create an Azure account, install the Azure static web apps extension in Visual Studio Code, configure the web app by specifying the project type, source code location, and build output location.', 'The Azure static web apps workflow automatically adds a YAML file for building and deploying the application, with the most important step being the deployment of the web app to a dynamically generated URL.', "The process includes automatically adding a settings.json file, which specifies the app's location and build output, with the build and deployment process being set up automatically by Azure Static Web Apps.", 'The chapter also covers updating the app for production environment testing by making changes to the application, such as updating an image, and discussing the need for writing tests for the production environment.']}, {'end': 3822.392, 'segs': [{'end': 2498.064, 'src': 'embed', 'start': 2472.468, 'weight': 0, 'content': [{'end': 2480.453, 'text': "we've successfully created a CI pipeline that not only tests our application but then deploys it to production and retest.", 'start': 2472.468, 'duration': 7.985}, {'end': 2484.876, 'text': 'you can now go ahead and make $100 million on this application.', 'start': 2480.453, 'duration': 4.423}, {'end': 2493.081, 'text': 'So just to summarize, in this tutorial, we created a very simple React web application using create React app.', 'start': 2486.116, 'duration': 6.965}, {'end': 2498.064, 'text': 'We then created component tests using React testing library.', 'start': 2494.101, 'duration': 3.963}], 'summary': 'Created ci pipeline deploying app to production, aiming for $100 million. used react testing library.', 'duration': 25.596, 'max_score': 2472.468, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U2472468.jpg'}, {'end': 2556.75, 'src': 'embed', 'start': 2524.915, 'weight': 3, 'content': [{'end': 2528.041, 'text': 'You can learn more about me at ultimateqa.com.', 'start': 2524.915, 'duration': 3.126}, {'end': 2532.431, 'text': "And it's been a true pleasure being able to show you all of the skills today.", 'start': 2528.382, 'duration': 4.049}, {'end': 2533.172, 'text': 'Have a wonderful day.', 'start': 2532.451, 'duration': 0.721}, {'end': 2540.566, 'text': 'Hey, and welcome to building a birthday reminder application with react.js.', 'start': 2534.585, 'duration': 5.981}, {'end': 2544.727, 'text': "In this tutorial, we're going to code a react application from scratch.", 'start': 2540.927, 'duration': 3.8}, {'end': 2549.549, 'text': "Next, we're going to consider a wonderful testing strategy for application.", 'start': 2545.348, 'duration': 4.201}, {'end': 2556.75, 'text': "And finally, we're going to implement a single test that's going to provide us a ton of coverage on our web application.", 'start': 2550.049, 'duration': 6.701}], 'summary': 'Tutorial on building a birthday reminder app with react, covering coding, testing, and implementation.', 'duration': 31.835, 'max_score': 2524.915, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U2524915.jpg'}, {'end': 3175.422, 'src': 'embed', 'start': 3140.247, 'weight': 2, 'content': [{'end': 3145.712, 'text': 'Beautiful So app j s so far is up and running.', 'start': 3140.247, 'duration': 5.465}, {'end': 3149.455, 'text': "Now let's go ahead and fill it with the actual users.", 'start': 3146.433, 'duration': 3.022}, {'end': 3159.085, 'text': "Alright, so next step, we're going to work out of our list component.", 'start': 3154.881, 'duration': 4.204}, {'end': 3173.399, 'text': 'our list component is going to contain all of the birthdays that are coming from data JS right, so you can see it contains the name, the age,', 'start': 3160.365, 'duration': 13.034}, {'end': 3175.422, 'text': 'the image and an ID.', 'start': 3173.399, 'duration': 2.023}], 'summary': 'App is up and running, filling it with actual users. working on list component containing birthdays data.', 'duration': 35.175, 'max_score': 3140.247, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U3140247.jpg'}, {'end': 3803.088, 'src': 'embed', 'start': 3776.418, 'weight': 1, 'content': [{'end': 3780.679, 'text': "So we're just going to go ahead and stop it so that we have full screen.", 'start': 3776.418, 'duration': 4.261}, {'end': 3788.382, 'text': 'And the technologies that we are going to use for our testing is WebDriver, IO and screener.', 'start': 3781.5, 'duration': 6.882}, {'end': 3795.785, 'text': "So we're actually going to perform a visual end to end test that's going to allow us to render the entire application.", 'start': 3788.803, 'duration': 6.982}, {'end': 3797.126, 'text': 'make sure that it looks correctly.', 'start': 3795.785, 'duration': 1.341}, {'end': 3803.088, 'text': "And then we're going to clear the entire list and make sure that that looks correctly.", 'start': 3797.586, 'duration': 5.502}], 'summary': 'Using webdriver.io and screener for visual end-to-end testing of the application.', 'duration': 26.67, 'max_score': 3776.418, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U3776418.jpg'}], 'start': 2126.026, 'title': 'Implementing and testing web app components', 'summary': 'Covers updating azure pipeline for testing, creating a ci pipeline for react web app deployment, setting up a birthday reminder react web app, and implementing a list component, leading to a $100 million potential application.', 'chapters': [{'end': 2279.594, 'start': 2126.026, 'title': 'Updating azure pipeline for testing', 'summary': 'Discusses updating the azure pipeline to handle testing, including adding visual tests on localhost and production, and updating package.json to use webdriver io.', 'duration': 153.568, 'highlights': ['Adding visual tests on localhost, including running npm run test visual and test visual prod, and updating package.json to change the base URL to the production URL.', 'Updating Azure pipeline to handle testing by merging Azure file and CI file, and adding visual tests to be executed on prod.', 'Describing the build and deploy step from Azure static web apps and the logic kept from Microsoft Azure for local testing, including installing dependencies, building the app, running component tests, and starting the app.']}, {'end': 2581.07, 'start': 2279.614, 'title': 'Ci pipeline with azure deployment', 'summary': 'Details the process of creating a ci pipeline that tests and deploys a react web application using github actions and azure static web apps, ensuring successful visual tests on both localhost and production, leading to a $100 million potential application.', 'duration': 301.456, 'highlights': ['Successfully created a CI pipeline that tests the application and deploys it to production, with a potential $100 million value. $100 million potential value', 'Added automated visual tests using Screener and WebDriver, and shifted right by creating component tests using React Testing Library. Automated visual tests, component tests', "Deployed the code to the Microsoft Azure Cloud using Azure Static Web Apps, ensuring the application's presence in the production environment. Deployment to Microsoft Azure Cloud", 'Identified the reason for visual test failure on localhost due to a change in the image, resolved it by accepting the new baseline, and reran the job successfully. Resolved visual test failure on localhost']}, {'end': 3137.264, 'start': 2581.53, 'title': 'React web app tutorial', 'summary': 'Covers setting up and coding a birthday reminder react web app, demonstrating the final version, setting up the project, and coding the main elements, including a section, h3, list component, and a button with an on-click event.', 'duration': 555.734, 'highlights': ['The chapter covers setting up and coding a birthday reminder React web app, demonstrating the final version, setting up the project, and coding the main elements, including a section, h3, list component, and a button with an on-click event.', "The project is a fork of a React web app project and involves teaching about testing and deploying. It includes a setup folder with boilerplate code and a final folder representing the end result (localhost 3000), featuring a simple application displaying birthdays and a 'clear all' button.", 'The tutorial involves navigating to the setup folder, creating a new branch (birthday tutorial), and setting up the project by installing dependencies and examining the initial code structure (app.js, data.js, index.css, index.js, and list.js).', "The coding process includes adding a main element and a section with a class name 'container', an h3 displaying the number of birthdays, importing the list component, adding a button with an on-click event that logs to the console, and using a keyboard shortcut (a nfn) to create an anonymous function.", 'The focus is on starting with a simple application and building up while learning to code and test it, emphasizing the importance of spending more time on project implementation and less time on CSS styling.']}, {'end': 3822.392, 'start': 3140.247, 'title': 'Implementing list component for web application', 'summary': 'Details the process of implementing a list component to display birthdays in a web application using react, including passing and mapping data, styling components, and testing strategies.', 'duration': 682.145, 'highlights': ['The chapter details the process of implementing a list component to display birthdays in a web application using React. The initial focus is on integrating a list component to display birthdays in a web application using React.', 'The list component iterates over the data, displaying the name, age, and image for each person. The list component iterates over the data, displaying the name, age, and image for each person, retrieved from data.js.', 'The chapter outlines the process of styling the components within the list, including the use of destructured object properties. The chapter outlines the process of styling the components within the list, including the use of destructured object properties to display the name, age, and image for each person.', 'The testing strategies discussed include unit tests, component tests, and end-to-end tests, with a focus on visual correctness. The testing strategies discussed include unit tests, component tests, and end-to-end tests, with a focus on visual correctness to ensure 100% working functionality of the application.', 'The use of WebDriverIO and screener for visual end-to-end testing is proposed to ensure 100% coverage of the application. The use of WebDriverIO and screener for visual end-to-end testing is proposed to ensure 100% working functionality of the application and visual correctness.']}], 'duration': 1696.366, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U2126026.jpg', 'highlights': ['Successfully created a CI pipeline that tests the application and deploys it to production, with a potential $100 million value.', 'The use of WebDriverIO and screener for visual end-to-end testing is proposed to ensure 100% working functionality of the application and visual correctness.', 'The list component iterates over the data, displaying the name, age, and image for each person, retrieved from data.js.', 'The chapter covers setting up and coding a birthday reminder React web app, demonstrating the final version, setting up the project, and coding the main elements, including a section, h3, list component, and a button with an on-click event.']}, {'end': 4217.854, 'segs': [{'end': 3972.354, 'src': 'embed', 'start': 3855.902, 'weight': 0, 'content': [{'end': 3858.583, 'text': "While it installs, I'll tell you a little bit about WebDriver.io.", 'start': 3855.902, 'duration': 2.681}, {'end': 3865.065, 'text': 'WebDriver.io is as it says here, next gen browser and mobile automation test framework for Node.js.', 'start': 3859.063, 'duration': 6.002}, {'end': 3870.367, 'text': "It's really good for end to end testing with browser and mobile.", 'start': 3865.605, 'duration': 4.762}, {'end': 3876.469, 'text': "So, if you're looking for a solution that can tackle web and mobile at the same time,", 'start': 3870.967, 'duration': 5.502}, {'end': 3881.07, 'text': 'plus it has other capabilities like being able to plug in with visual and to end testing,', 'start': 3876.469, 'duration': 4.601}, {'end': 3885.232, 'text': 'tools such as screener Webdriver IO is the right tool for you.', 'start': 3881.07, 'duration': 4.162}, {'end': 3889.074, 'text': "So next, we're gonna answer a few of these questions.", 'start': 3885.933, 'duration': 3.141}, {'end': 3891.495, 'text': "Where's the automation back end located?", 'start': 3889.094, 'duration': 2.401}, {'end': 3896.878, 'text': 'we are going to be used running in the cloud using Sauce Labs, because Sauce Labs is integrated into screener.', 'start': 3891.495, 'duration': 5.383}, {'end': 3898.319, 'text': "we're going to need Sauce Labs.", 'start': 3896.878, 'duration': 1.441}, {'end': 3899.139, 'text': 'I have an account.', 'start': 3898.319, 'duration': 0.82}, {'end': 3903.021, 'text': "if you don't, definitely go ahead and sign up at Sauce labs.com.", 'start': 3899.139, 'duration': 3.882}, {'end': 3905.423, 'text': 'Grab your free account there.', 'start': 3903.542, 'duration': 1.881}, {'end': 3908.444, 'text': "And I'll show you how to set up that.", 'start': 3906.123, 'duration': 2.321}, {'end': 3914.328, 'text': "So it's already asking me about the environment variables for my username and access key for sauce apps.", 'start': 3908.484, 'duration': 5.844}, {'end': 3921.574, 'text': 'And yes, mine are saved in sauce username and access key in my bash profile just like that.', 'start': 3914.608, 'duration': 6.966}, {'end': 3924.677, 'text': "No, we don't want to run headless tests.", 'start': 3922.375, 'duration': 2.302}, {'end': 3930.161, 'text': "In which region we're going to do us, which framework Mocha is fine.", 'start': 3925.457, 'duration': 4.704}, {'end': 3932.383, 'text': "There's also Jasmine and cucumber options.", 'start': 3930.201, 'duration': 2.182}, {'end': 3934.625, 'text': "No, we don't have a compiler.", 'start': 3932.863, 'duration': 1.762}, {'end': 3937.007, 'text': 'our specs located that you have default.', 'start': 3934.625, 'duration': 2.382}, {'end': 3938.728, 'text': "I'm just hitting Enter for most of these.", 'start': 3937.007, 'duration': 1.721}, {'end': 3948.19, 'text': "Yeah, let's have WebDriver IO generate some test files for us, just so we can look at exactly what those look like page objects.", 'start': 3939.266, 'duration': 8.924}, {'end': 3949.251, 'text': 'No, thank you.', 'start': 3948.31, 'duration': 0.941}, {'end': 3953.032, 'text': "That's way overkill for our testing purposes here.", 'start': 3949.611, 'duration': 3.421}, {'end': 3955.974, 'text': 'spec reporter is totally good.', 'start': 3953.833, 'duration': 2.141}, {'end': 3960.219, 'text': "And then the services that we're going to install sauce service.", 'start': 3956.574, 'duration': 3.645}, {'end': 3966.887, 'text': "we don't need the Chrome driver service, Chrome driver services for running tests locally, unnecessary for our purposes,", 'start': 3960.219, 'duration': 6.668}, {'end': 3972.354, 'text': "because we're only going to be using a single visual end to end test to tackle all of our problems.", 'start': 3966.887, 'duration': 5.467}], 'summary': 'Webdriver.io is a next gen browser and mobile automation test framework for node.js, suitable for end to end testing with browser and mobile, integrated with sauce labs for cloud running.', 'duration': 116.452, 'max_score': 3855.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U3855902.jpg'}], 'start': 3822.492, 'title': 'Webdriver.io installation and setup', 'summary': 'Covers the installation of webdriver.io for end-to-end testing with browser and mobile, including integration with visual testing tools like sauce labs and screener, and setting up environment variables for ci/cd and local testing.', 'chapters': [{'end': 3972.354, 'start': 3822.492, 'title': 'Installing webdriver.io for browser and mobile automation', 'summary': 'Discusses the installation of webdriver.io for end-to-end testing with browser and mobile, including the integration with visual end-to-end testing tools and the use of sauce labs for cloud-based testing.', 'duration': 149.862, 'highlights': ['WebDriver.io is a next gen browser and mobile automation test framework for Node.js, suitable for end-to-end testing with browser and mobile, and integration with visual end-to-end testing tools such as screener. (relevance: 5)', 'Sauce Labs is integrated into screener, making it a suitable choice for cloud-based testing, and the chapter recommends signing up for a free account at Sauce labs.com. (relevance: 4)', 'The installation process allows users to select various options, including the choice of framework (Mocha, Jasmine, or Cucumber), generation of test files, and selection of services like sauce service. (relevance: 3)', 'The chapter also mentions the use of environment variables for username and access key for Sauce Labs, and the decision not to run headless tests. (relevance: 2)', 'The need for Chrome driver service is considered unnecessary as the focus is on using a single visual end-to-end test for all purposes. (relevance: 1)']}, {'end': 4217.854, 'start': 3972.915, 'title': 'Setting up webdriver io for visual end-to-end testing', 'summary': 'Covers setting up webdriver io for visual end-to-end testing, including updating package.json, configuring webdriver io, integrating with screener for visual testing, and setting up environment variables for ci/cd and testing on local machines.', 'duration': 244.939, 'highlights': ['The coolest part is just running the video and seeing exactly what happened, confirming our environment setup for visual end-to-end testing.', 'Configuring visual options object with API key and project name for integrating WebDriver IO with screener for visual end-to-end testing.', 'Updating package.json with WebDriver IO, configuring WebDriver IO, and running a simple test to navigate to a URL and perform login.', 'Setting up environment variables for sauce and screener, enabling a secure connection from the screener cloud to the local machine for appropriate validations.']}], 'duration': 395.362, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U3822492.jpg', 'highlights': ['WebDriver.io is a next gen browser and mobile automation test framework for Node.js, suitable for end-to-end testing with browser and mobile, and integration with visual end-to-end testing tools such as screener.', 'Sauce Labs is integrated into screener, making it a suitable choice for cloud-based testing, and the chapter recommends signing up for a free account at Sauce labs.com.', 'The installation process allows users to select various options, including the choice of framework (Mocha, Jasmine, or Cucumber), generation of test files, and selection of services like sauce service.', 'The chapter also mentions the use of environment variables for username and access key for Sauce Labs, and the decision not to run headless tests.', 'The need for Chrome driver service is considered unnecessary as the focus is on using a single visual end-to-end test for all purposes.']}, {'end': 4640.669, 'segs': [{'end': 4268.926, 'src': 'embed', 'start': 4218.835, 'weight': 0, 'content': [{'end': 4228.159, 'text': 'And finally, I have an array here that will allow me to run across as many browsers and operating systems as I want.', 'start': 4218.835, 'duration': 9.324}, {'end': 4231.801, 'text': 'Currently, I have it set to desktop.', 'start': 4228.68, 'duration': 3.121}, {'end': 4235.263, 'text': 'This one is the most popular desktop resolution.', 'start': 4232.321, 'duration': 2.942}, {'end': 4246.2, 'text': 'currently, And so I set it to that resolution, set it to RAM on Chrome, Windows 10 and latest and then, passing that viewport size,', 'start': 4235.967, 'duration': 10.233}, {'end': 4251.708, 'text': 'we can add more of these capabilities to run across more browsers and operating systems.', 'start': 4246.2, 'duration': 5.508}, {'end': 4255.492, 'text': 'And of course, we can also change this part up if we want.', 'start': 4252.228, 'duration': 3.264}, {'end': 4258.315, 'text': "So that's the configuration.", 'start': 4255.872, 'duration': 2.443}, {'end': 4263.681, 'text': "What does the test actually look like? Let's come back to the test that have shown me let me show you that here.", 'start': 4258.595, 'duration': 5.086}, {'end': 4265.723, 'text': "Here's what the test actually looks like.", 'start': 4264.081, 'duration': 1.642}, {'end': 4268.926, 'text': "It's used as a standard describe it format.", 'start': 4266.223, 'duration': 2.703}], 'summary': 'Config array enables cross-browser testing across various os and browsers.', 'duration': 50.091, 'max_score': 4218.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U4218835.jpg'}, {'end': 4319.14, 'src': 'embed', 'start': 4290.318, 'weight': 2, 'content': [{'end': 4298.884, 'text': "By the way, all of this documentation is available here in Docs, visual and to unbox, you can follow along there, it'll help you get set up.", 'start': 4290.318, 'duration': 8.566}, {'end': 4304.873, 'text': "But of course, I'm here to explain as well, this will just basically start the execution for the test.", 'start': 4299.81, 'duration': 5.063}, {'end': 4309.435, 'text': 'And then this is one of the most important pieces is capturing the snapshot.', 'start': 4305.333, 'duration': 4.102}, {'end': 4319.14, 'text': 'So here I am capturing a snapshot and calling it the default state because this is initially when our application opens.', 'start': 4309.915, 'duration': 9.225}], 'summary': 'The documentation is available in docs for setting up and executing the test, including capturing the default snapshot.', 'duration': 28.822, 'max_score': 4290.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U4290318.jpg'}, {'end': 4510.177, 'src': 'embed', 'start': 4487.889, 'weight': 3, 'content': [{'end': 4501.354, 'text': 'That is the best and most powerful thing about visual end to end testing is that we can capture the state and the look of the entire application in a single command.', 'start': 4487.889, 'duration': 13.465}, {'end': 4503.054, 'text': "And so that's exactly what we did here.", 'start': 4501.494, 'duration': 1.56}, {'end': 4510.177, 'text': 'And so we validated anything that we could have possibly needed to validate in this default state, right.', 'start': 4503.415, 'duration': 6.762}], 'summary': 'Visual end-to-end testing captures entire application state in a single command.', 'duration': 22.288, 'max_score': 4487.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U4487889.jpg'}, {'end': 4609.925, 'src': 'embed', 'start': 4581.461, 'weight': 5, 'content': [{'end': 4585.384, 'text': 'And we wanted we can run our tests.', 'start': 4581.461, 'duration': 3.923}, {'end': 4587.847, 'text': "Actually, let's look at our application first.", 'start': 4585.805, 'duration': 2.042}, {'end': 4593.872, 'text': 'Look, it only has four people now, right.', 'start': 4591.37, 'duration': 2.502}, {'end': 4598.036, 'text': 'And so if we rerun our tests, let me show you exactly what this will tell us.', 'start': 4593.932, 'duration': 4.104}, {'end': 4602.379, 'text': 'Think about it.', 'start': 4601.718, 'duration': 0.661}, {'end': 4609.925, 'text': "if we're rerunning our tests and it's comparing to the baseline which functionality has changed and which functionality remains the same?", 'start': 4602.379, 'duration': 7.546}], 'summary': 'Application has only four people, retesting to identify functionality changes.', 'duration': 28.464, 'max_score': 4581.461, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U4581461.jpg'}], 'start': 4218.835, 'title': 'Automated browser testing configuration and visual end-to-end testing', 'summary': 'Covers configuring tests across browsers and operating systems, demonstrating automated browser testing, capturing snapshots, setting up viewport size, and visual end-to-end testing for validating application functionality and appearance against baselines.', 'chapters': [{'end': 4409.994, 'start': 4218.835, 'title': 'Automated browser testing configuration', 'summary': 'Discusses configuring an array for running tests across various browsers and operating systems, and demonstrates the test script for an automated browser test, capturing snapshots and ensuring functionality, with a focus on setting up a viewport size and running the test using web driver io config.', 'duration': 191.159, 'highlights': ['Configuring an array for running tests across various browsers and operating systems The speaker discusses setting up an array to run tests across different browsers and operating systems, with a focus on the most popular desktop resolution.', 'Demonstrating the test script for an automated browser test The speaker provides a walkthrough of the test script using standard describe it format, navigating to a URL, capturing snapshots, and ending the test to ensure no messages in the results object.', "Setting up a viewport size and running the test using web driver IO config The chapter emphasizes setting the viewport size, executing the test using web driver IO config, and capturing snapshots to ensure the application's functionality."]}, {'end': 4640.669, 'start': 4410.314, 'title': 'Visual end-to-end testing', 'summary': 'Discusses the process of visual end-to-end testing, showcasing the capture of default and cleared states of an application using visual tests, ensuring correct functionality and appearance, and validating future iterations against these baselines.', 'duration': 230.355, 'highlights': ['The chapter demonstrates the capture of default and cleared states of the application using visual end-to-end testing, allowing validation of correct functionality and appearance for future iterations.', 'Visual end-to-end testing ensures capturing the state and look of the entire application in a single command, validating all necessary aspects in the default state.', "The test also ensures that the application's appearance remains correct during functionality testing, providing comprehensive validation.", 'By comparing future iterations against the captured baselines, the tests identify changes in functionality and appearance, enabling efficient validation of application updates.']}], 'duration': 421.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U4218835.jpg', 'highlights': ['Configuring an array for running tests across various browsers and operating systems with a focus on popular desktop resolution.', 'Demonstrating the test script for an automated browser test using standard describe it format, capturing snapshots, and ending the test.', 'Setting up a viewport size, executing the test using web driver IO config, and capturing snapshots to ensure application functionality.', 'Demonstrating the capture of default and cleared states of the application using visual end-to-end testing for future iterations.', 'Visual end-to-end testing ensures capturing the state and look of the entire application in a single command, validating all necessary aspects.', 'Comparing future iterations against captured baselines to identify changes in functionality and appearance for efficient validation of updates.']}, {'end': 5405.963, 'segs': [{'end': 4751.609, 'src': 'embed', 'start': 4687.992, 'weight': 0, 'content': [{'end': 4698.998, 'text': 'And finally, if you want to learn something specific around react, building applications and testing them, comment down below.', 'start': 4687.992, 'duration': 11.006}, {'end': 4705.701, 'text': "And I'll be sure to bring those tutorials to your YouTube feed.", 'start': 4699.418, 'duration': 6.283}, {'end': 4706.662, 'text': 'Thanks again.', 'start': 4706.061, 'duration': 0.601}, {'end': 4707.982, 'text': 'Have an amazing day.', 'start': 4707.082, 'duration': 0.9}, {'end': 4709.043, 'text': 'See you next time.', 'start': 4708.342, 'duration': 0.701}, {'end': 4721.522, 'text': "Today, we're going to build a beautiful Next.js personal portfolio website.", 'start': 4714.417, 'duration': 7.105}, {'end': 4722.863, 'text': 'This is what it looks like.', 'start': 4721.922, 'duration': 0.941}, {'end': 4729.007, 'text': "If you navigate to Nikolai tech, you'll be able to see a live version of the application.", 'start': 4722.923, 'duration': 6.084}, {'end': 4732.13, 'text': 'You can see how beautiful it looks.', 'start': 4729.488, 'duration': 2.642}, {'end': 4734.331, 'text': 'Everything here is functional.', 'start': 4732.63, 'duration': 1.701}, {'end': 4744.381, 'text': 'These icons will take you to different resources that you want people to know about yourself.', 'start': 4734.752, 'duration': 9.629}, {'end': 4751.609, 'text': "If you scroll down, you'll see a collection of all of the projects that you've done.", 'start': 4745.222, 'duration': 6.387}], 'summary': 'Tutorial on building a next.js personal portfolio website with live demo available at nikolai tech.', 'duration': 63.617, 'max_score': 4687.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U4687992.jpg'}, {'end': 4891.187, 'src': 'embed', 'start': 4806.031, 'weight': 1, 'content': [{'end': 4808.132, 'text': 'to have a website that is not responsive.', 'start': 4806.031, 'duration': 2.101}, {'end': 4814.116, 'text': 'And you can see how our mobile view looks, everything looks wonderful.', 'start': 4808.152, 'duration': 5.964}, {'end': 4819.058, 'text': "It's easy to read, easy to see, you can interact with everything.", 'start': 4814.296, 'duration': 4.762}, {'end': 4825.142, 'text': "If you want to view an application, you can click on the application, and then it'll take you there.", 'start': 4819.179, 'duration': 5.963}, {'end': 4832.226, 'text': "Alright, so with all of that said, let's jump into building testing this application.", 'start': 4825.782, 'duration': 6.444}, {'end': 4839.849, 'text': "So let's go ahead and actually grab the code.", 'start': 4837.526, 'duration': 2.323}, {'end': 4844.716, 'text': "So you'll be able to locate the code at this repository.", 'start': 4840.31, 'duration': 4.406}, {'end': 4846.358, 'text': "And while you're there,", 'start': 4845.096, 'duration': 1.262}, {'end': 4859.412, 'text': 'please give the repository a star and then you will be able to get the final version of the portfolio here in this dev portfolio folder.', 'start': 4846.358, 'duration': 13.054}, {'end': 4860.993, 'text': 'This is where all the code lives.', 'start': 4859.652, 'duration': 1.341}, {'end': 4868.597, 'text': "So if you pull this down and start the server, you'll be able to see a live version of the application.", 'start': 4861.013, 'duration': 7.584}, {'end': 4873.52, 'text': 'And I even created a starter version of the code for us.', 'start': 4869.137, 'duration': 4.383}, {'end': 4885.965, 'text': 'So if you come to the branches and search for dev portfolio, start branch Now and then you can download this code.', 'start': 4873.82, 'duration': 12.145}, {'end': 4888.045, 'text': 'come to code and download zip.', 'start': 4885.965, 'duration': 2.08}, {'end': 4891.187, 'text': "you'll be able to get a starter version of the application.", 'start': 4888.045, 'duration': 3.142}], 'summary': 'Developed a responsive website with mobile view, allowing easy interaction and access to the application code.', 'duration': 85.156, 'max_score': 4806.031, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U4806031.jpg'}, {'end': 5009.979, 'src': 'embed', 'start': 4983.094, 'weight': 8, 'content': [{'end': 4990.236, 'text': 'So every single component already is created here just with a bare bones div that displays the text.', 'start': 4983.094, 'duration': 7.142}, {'end': 4996.757, 'text': "And what you'll also notice, just to make this tutorial a lot more entertaining and move a lot faster,", 'start': 4990.816, 'duration': 5.941}, {'end': 5000.197, 'text': "is we've already created all of the styles as well.", 'start': 4996.757, 'duration': 3.44}, {'end': 5005.678, 'text': 'So you can see the styles for each of the components are set up here through CSS.', 'start': 5000.477, 'duration': 5.201}, {'end': 5009.979, 'text': "So all we're going to have to do is just code out the actual application.", 'start': 5005.978, 'duration': 4.001}], 'summary': 'Components and styles are ready, just code the application.', 'duration': 26.885, 'max_score': 4983.094, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U4983094.jpg'}, {'end': 5055.585, 'src': 'embed', 'start': 5025.489, 'weight': 7, 'content': [{'end': 5034.775, 'text': 'how to get started and a lot of other information that we may be useful for your development and testing journey.', 'start': 5025.489, 'duration': 9.286}, {'end': 5039.959, 'text': "So with all that said, let's go in and start building our personal portfolio website.", 'start': 5035.016, 'duration': 4.943}, {'end': 5051.684, 'text': "So let's go ahead and create our very first component, which is going to be our header component.", 'start': 5045.381, 'duration': 6.303}, {'end': 5055.585, 'text': "Usually, it's easiest to get started with the simplest component.", 'start': 5051.944, 'duration': 3.641}], 'summary': 'The transcript covers getting started and building a personal portfolio website with a focus on starting with the simplest component.', 'duration': 30.096, 'max_score': 5025.489, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U5025489.jpg'}, {'end': 5348.142, 'src': 'embed', 'start': 5319.066, 'weight': 9, 'content': [{'end': 5323.551, 'text': "And in a web application world, it's really important to be mobile first.", 'start': 5319.066, 'duration': 4.485}, {'end': 5327.772, 'text': 'all our applications now they have to be responsive and they have to support mobile.', 'start': 5324.171, 'duration': 3.601}, {'end': 5337.175, 'text': "So that's the very first thing that we have to check is how does our web application respond to different mobile device resolutions.", 'start': 5328.092, 'duration': 9.083}, {'end': 5348.142, 'text': 'And so a really good way to do this is to check that as we scale down our browser to see whether we are finding any issues.', 'start': 5337.255, 'duration': 10.887}], 'summary': 'Web applications must be mobile-first and responsive to different device resolutions.', 'duration': 29.076, 'max_score': 5319.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U5319066.jpg'}], 'start': 4641.23, 'title': 'Building and setting up next.js portfolio', 'summary': 'Covers building a next.js personal portfolio website with features like live version, functional icons, project collection, skills display, and responsiveness, and provides guidance on setting up the website, including code access, server start, component creation, style addition, and mobile responsiveness testing.', 'chapters': [{'end': 4832.226, 'start': 4641.23, 'title': 'Building next.js portfolio', 'summary': 'Introduces building a next.js personal portfolio website, showcasing its features, including live version, functional icons, project collection, skills display, personal description, and responsiveness, and concludes with an invitation for future tutorials.', 'duration': 190.996, 'highlights': ['The website showcases functional icons, project collection, skills display, personal description, and responsiveness.', 'The mobile view of the website is responsive, easy to read, and interact with.', 'The tutorial concludes with an invitation for future video tutorials and an assurance to bring requested content to the YouTube feed.', 'The chapter introduces building a Next.js personal portfolio website and showcases its features, including a live version, functional icons, project collection, skills display, personal description, and responsiveness.']}, {'end': 5405.963, 'start': 4837.526, 'title': 'Setting up personal portfolio website', 'summary': 'Provides guidance on setting up a personal portfolio website, including accessing code, starting the server, creating components, adding styles, and testing for mobile responsiveness.', 'duration': 568.437, 'highlights': ['Accessing the code repository and obtaining the final version of the portfolio The chapter guides on accessing the code repository to obtain the final version of the portfolio.', 'Starting the server to view the live version of the application Instructions are given on starting the server to view the live version of the application.', "Creating a starter version of the code by downloading from the 'dev portfolio' branch A starter version of the code can be obtained by downloading from the 'dev portfolio' branch.", 'Providing a bare bones starter code for the personal portfolio website A bare bones starter code is provided for the personal portfolio website, facilitating a quick start and avoiding unnecessary setup.', 'Guidance on setting up components and utilizing existing styles for the application Instructions and existing styles are provided to facilitate setting up components for the application.', 'Importance of mobile-first approach and testing strategy for web application The importance of a mobile-first approach and testing strategy for web applications is highlighted, emphasizing the need for responsiveness and thorough mobile support.']}], 'duration': 764.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U4641230.jpg', 'highlights': ['The website showcases functional icons, project collection, skills display, personal description, and responsiveness.', 'The mobile view of the website is responsive, easy to read, and interact with.', 'The tutorial concludes with an invitation for future video tutorials and an assurance to bring requested content to the YouTube feed.', 'The chapter introduces building a Next.js personal portfolio website and showcases its features, including a live version, functional icons, project collection, skills display, personal description, and responsiveness.', 'Accessing the code repository and obtaining the final version of the portfolio The chapter guides on accessing the code repository to obtain the final version of the portfolio.', 'Starting the server to view the live version of the application Instructions are given on starting the server to view the live version of the application.', "Creating a starter version of the code by downloading from the 'dev portfolio' branch A starter version of the code can be obtained by downloading from the 'dev portfolio' branch.", 'Providing a bare bones starter code for the personal portfolio website A bare bones starter code is provided for the personal portfolio website, facilitating a quick start and avoiding unnecessary setup.', 'Guidance on setting up components and utilizing existing styles for the application Instructions and existing styles are provided to facilitate setting up components for the application.', 'Importance of mobile-first approach and testing strategy for web application The importance of a mobile-first approach and testing strategy for web applications is highlighted, emphasizing the need for responsiveness and thorough mobile support.']}, {'end': 6531.805, 'segs': [{'end': 5454.106, 'src': 'embed', 'start': 5406.023, 'weight': 0, 'content': [{'end': 5410.386, 'text': 'And of course, you can also check it on a non iPhone device as well.', 'start': 5406.023, 'duration': 4.363}, {'end': 5411.727, 'text': "So that's important.", 'start': 5410.866, 'duration': 0.861}, {'end': 5422.293, 'text': "And so what we're going to end up doing actually is writing automated visual end to end test to ensure that our application looks good on different resolutions.", 'start': 5411.827, 'duration': 10.466}, {'end': 5427.496, 'text': 'And we can continue testing throughout those resolutions as we develop our application,', 'start': 5422.913, 'duration': 4.583}, {'end': 5432.759, 'text': 'making sure that there are no regressions as we code our application.', 'start': 5427.496, 'duration': 5.263}, {'end': 5442.924, 'text': 'The other thing to remember is that we added URLs here in these icons, right? These are the URLs that we supplied ourselves.', 'start': 5433.24, 'duration': 9.684}, {'end': 5450.585, 'text': "And of course, it's very possible that these URLs can be fat fingered and incorrect.", 'start': 5443.504, 'duration': 7.081}, {'end': 5454.106, 'text': 'We of course, tested them manually already to ensure that they are correct.', 'start': 5450.925, 'duration': 3.181}], 'summary': 'Automated visual end-to-end tests ensure app looks good on different resolutions, avoiding regressions as we code.', 'duration': 48.083, 'max_score': 5406.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U5406023.jpg'}, {'end': 5574.146, 'src': 'embed', 'start': 5509.294, 'weight': 1, 'content': [{'end': 5514.122, 'text': "And so this is what we're going to work on, we're going to write automated tests to make all of this possible.", 'start': 5509.294, 'duration': 4.828}, {'end': 5516.586, 'text': "So let's go ahead and do that.", 'start': 5514.502, 'duration': 2.084}, {'end': 5525.521, 'text': "we're going to use two tools that are going to assist us in our automated testing journey.", 'start': 5521.718, 'duration': 3.803}, {'end': 5528.063, 'text': "First, we're going to use Happo IO,", 'start': 5525.941, 'duration': 2.122}, {'end': 5537.469, 'text': 'which is a visual end to end testing tool that allows us to ensure that our application looks as it should on different resolutions.', 'start': 5528.063, 'duration': 9.406}, {'end': 5538.991, 'text': 'And you can even see here.', 'start': 5537.89, 'duration': 1.101}, {'end': 5542.353, 'text': 'actually, this is kind of what happens.', 'start': 5538.991, 'duration': 3.362}, {'end': 5547.015, 'text': 'it allows you to take snapshots and then those snapshots can be compared against baselines.', 'start': 5542.353, 'duration': 4.662}, {'end': 5551.056, 'text': "And then we're going to run those tests with Cypress IO.", 'start': 5547.595, 'duration': 3.461}, {'end': 5556.158, 'text': 'Cypress IO is a functional end to end browser testing tool.', 'start': 5551.356, 'duration': 4.802}, {'end': 5558.119, 'text': "And it'll allow us to run our tests.", 'start': 5556.619, 'duration': 1.5}, {'end': 5563.401, 'text': "And then of course, it'll allow us to write our functional end to end tests as well.", 'start': 5558.199, 'duration': 5.202}, {'end': 5566.863, 'text': "So let's go ahead and make all of this happen.", 'start': 5563.842, 'duration': 3.021}, {'end': 5574.146, 'text': "So in order to save time, I've actually already installed and set up a bunch of information here.", 'start': 5567.243, 'duration': 6.903}], 'summary': 'Automated testing will be done using happo io for visual end-to-end testing and cypress io for functional end-to-end testing.', 'duration': 64.852, 'max_score': 5509.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U5509294.jpg'}, {'end': 5907.076, 'src': 'embed', 'start': 5858.907, 'weight': 4, 'content': [{'end': 5864.032, 'text': 'you can see our bug over here we created at this resolution.', 'start': 5858.907, 'duration': 5.125}, {'end': 5869.016, 'text': 'And then you can see other resolutions and what our application looks like.', 'start': 5864.793, 'duration': 4.223}, {'end': 5873.761, 'text': 'And so in these, everything looks good to me.', 'start': 5869.457, 'duration': 4.304}, {'end': 5879.008, 'text': 'no huge issues, of course, except this part here.', 'start': 5874.824, 'duration': 4.184}, {'end': 5881.911, 'text': "And so now we've basically set our baselines.", 'start': 5879.689, 'duration': 2.222}, {'end': 5885.554, 'text': 'And from this point forward, when we execute these visual tests,', 'start': 5882.191, 'duration': 3.363}, {'end': 5891.44, 'text': "they're going to be compared against this and we're going to need to decide whether we broke something or we did not.", 'start': 5885.554, 'duration': 5.886}, {'end': 5898.807, 'text': 'So those are our visual tests, ensuring our application is looking beautiful across different browsers and operating systems.', 'start': 5891.84, 'duration': 6.967}, {'end': 5902.611, 'text': 'What about the functional aspects of our application??', 'start': 5899.347, 'duration': 3.264}, {'end': 5905.154, 'text': 'How do we actually test those??', 'start': 5902.691, 'duration': 2.463}, {'end': 5907.076, 'text': 'What are we going to do with all of these links?', 'start': 5905.194, 'duration': 1.882}], 'summary': "Visual tests set baselines for application's appearance across browsers and operating systems, while functional testing methods are yet to be determined.", 'duration': 48.169, 'max_score': 5858.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U5858907.jpg'}, {'end': 5967.363, 'src': 'embed', 'start': 5938.692, 'weight': 8, 'content': [{'end': 5943.093, 'text': 'I learned along the way that that is not the most optimal approach.', 'start': 5938.692, 'duration': 4.401}, {'end': 5945.434, 'text': "There's actually a better approach to doing that.", 'start': 5943.133, 'duration': 2.301}, {'end': 5950.915, 'text': 'The better approach to doing that that I learned along the way would be to do something like a component test.', 'start': 5945.654, 'duration': 5.261}, {'end': 5959.757, 'text': 'A component test, also known as a unit test, is something that we can do to simply check the href attribute of each one of these elements right?', 'start': 5951.255, 'duration': 8.502}, {'end': 5967.363, 'text': 'If we come here and inspect each one of these locators, what we see is that each of these has an href attribute.', 'start': 5960.097, 'duration': 7.266}], 'summary': 'The optimal approach is to use component tests to check href attributes of elements.', 'duration': 28.671, 'max_score': 5938.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U5938692.jpg'}, {'end': 6066.374, 'src': 'embed', 'start': 6038.789, 'weight': 9, 'content': [{'end': 6041.832, 'text': 'And this is just an object pointed to your words right?', 'start': 6038.789, 'duration': 3.043}, {'end': 6049.279, 'text': 'So we can simply do something like a snapshot test that ensures that all of these URLs are correct.', 'start': 6041.872, 'duration': 7.407}, {'end': 6050.72, 'text': 'that would actually be wonderful.', 'start': 6049.279, 'duration': 1.441}, {'end': 6053.062, 'text': 'it will take milliseconds to execute.', 'start': 6050.72, 'duration': 2.342}, {'end': 6057.767, 'text': 'It would basically just capture a snapshot of this file.', 'start': 6053.943, 'duration': 3.824}, {'end': 6063.492, 'text': "And then if anything changes about this file, it would let us know that there's a change.", 'start': 6058.167, 'duration': 5.325}, {'end': 6066.374, 'text': "And then it's for us to decide whether it's a breaking change or not.", 'start': 6063.532, 'duration': 2.842}], 'summary': 'Snapshot tests ensure url correctness, taking milliseconds to execute.', 'duration': 27.585, 'max_score': 6038.789, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U6038789.jpg'}, {'end': 6143.871, 'src': 'embed', 'start': 6115.627, 'weight': 5, 'content': [{'end': 6119.711, 'text': 'And so a functional end to end test, of course, as I talked about, was coming here,', 'start': 6115.627, 'duration': 4.084}, {'end': 6123.976, 'text': 'checking the href attribute and then making sure that that is correct.', 'start': 6119.711, 'duration': 4.265}, {'end': 6133.085, 'text': "And so to make that kind of test possible, what I've written here is this social details spec j s file.", 'start': 6124.456, 'duration': 8.629}, {'end': 6139.009, 'text': "if we take a look at it together, and actually, we don't even need either one of these, we're going to save that.", 'start': 6133.926, 'duration': 5.083}, {'end': 6143.871, 'text': "So what you'll see here is we are visiting our URL as before.", 'start': 6139.349, 'duration': 4.522}], 'summary': 'Functional end-to-end test ensures correct href attribute by visiting url.', 'duration': 28.244, 'max_score': 6115.627, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U6115627.jpg'}], 'start': 5406.023, 'title': 'Importance of automated visual and functional testing', 'summary': 'Emphasizes the significance of automated visual and functional testing to maintain application appearance and functionality across various resolutions. it highlights the use of tools like happo io for visual end-to-end testing and cypress io for functional end-to-end testing.', 'chapters': [{'end': 5731.598, 'start': 5406.023, 'title': 'Automated visual and functional testing', 'summary': 'Discusses the importance of automated visual and functional testing to ensure application appearance and functionality across different resolutions, utilizing tools like happo io for visual end-to-end testing and cypress io for functional end-to-end testing.', 'duration': 325.575, 'highlights': ["Automated visual end to end tests to ensure application appearance on different resolutions The chapter emphasizes the significance of writing automated visual end to end tests to ensure the application's appearance on different resolutions, preventing regressions as the application is coded.", "Use of Happo IO for visual end to end testing The chapter introduces Happo IO as a tool for visual end to end testing, allowing the comparison of snapshots against baselines to ensure the application's appearance across different resolutions.", "Utilizing Cypress IO for functional end to end testing Cypress IO is highlighted as a functional end to end browser testing tool that allows running and writing functional end to end tests to ensure the application's functionality.", 'Setting up automated testing tools and configurations The chapter provides detailed instructions on setting up automated testing tools like Happo IO and Cypress IO, including creating visual test files, importing necessary code, and configuring targets for testing.', 'Significance of checking and validating application URLs and navigation The chapter emphasizes the importance of validating and checking application URLs, navigation, and icons to ensure correctness and matching, preventing potential failures in the future.']}, {'end': 6008.326, 'start': 5732.038, 'title': 'Setting up visual and functional tests', 'summary': 'Discusses setting up visual tests for different viewport sizes using cypress, baselining the visual tests, and then explains a better approach for testing links using component tests instead of visual end-to-end testing tools.', 'duration': 276.288, 'highlights': ['Setting up visual tests for different viewport sizes using Cypress The speaker sets up visual tests for various viewport sizes, including Chrome 1080p Samsung Galaxy S 10 and iPhone 12, using Cypress.', "Baselining the visual tests for future comparisons The process of baselining the visual tests is explained, where the tests are compared against the current state to identify any changes or issues in the application's appearance.", 'Explaining the better approach of using component tests for checking links The speaker highlights the advantage of using component tests to check the href attribute of each link as a better approach compared to visually identifying and clicking on each link using end-to-end testing tools like Cypress Selenium.']}, {'end': 6531.805, 'start': 6009.546, 'title': 'Testing social links', 'summary': 'Discusses the importance of testing social links, implementing functional end-to-end tests to ensure correct urls, and utilizing visual tests to avoid introducing new bugs.', 'duration': 522.259, 'highlights': ['Functional end-to-end tests are recommended for testing social links, ensuring correct URLs and reducing effort. The speaker suggests using functional end-to-end tests to check the href attribute of each social link and ensure that it is correct, reducing the effort required and improving coverage.', 'Utilizing visual tests for checking the visual aspects and identifying new bugs introduced during development. The importance of running visual tests to compare the previous and current states of the application, checking for any new bugs or issues introduced during development, and ensuring the visual aspects remain consistent across different devices.', 'Component tests for capturing a snapshot of the social details file, ensuring correct URLs and detecting changes. The concept of using component tests to capture a snapshot of the social details file, ensuring the correctness of URLs, and detecting any changes that may occur.']}], 'duration': 1125.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U5406023.jpg', 'highlights': ['Automated visual end to end tests to ensure application appearance on different resolutions', 'Utilizing Cypress IO for functional end to end testing', 'Use of Happo IO for visual end to end testing', 'Setting up visual tests for different viewport sizes using Cypress', 'Baselining the visual tests for future comparisons', 'Functional end-to-end tests are recommended for testing social links, ensuring correct URLs and reducing effort', 'Utilizing visual tests for checking the visual aspects and identifying new bugs introduced during development', 'Setting up automated testing tools and configurations', 'Explaining the better approach of using component tests for checking links', 'Component tests for capturing a snapshot of the social details file, ensuring correct URLs and detecting changes', 'Significance of checking and validating application URLs and navigation']}, {'end': 7458.919, 'segs': [{'end': 6588.732, 'src': 'embed', 'start': 6532.226, 'weight': 3, 'content': [{'end': 6536.291, 'text': 'So of course, we can test the button to ensure that it navigates us to the correct location.', 'start': 6532.226, 'duration': 4.065}, {'end': 6539.535, 'text': "But we don't have the about me section yet.", 'start': 6536.691, 'duration': 2.844}, {'end': 6541.597, 'text': "So we're gonna do that in the future.", 'start': 6539.615, 'duration': 1.982}, {'end': 6552.386, 'text': 'One thing we can do, if we wanted, we could write a test in we can create a new file and call this one hero.spec.js.', 'start': 6541.737, 'duration': 10.649}, {'end': 6561.249, 'text': 'And we could have a failing test that would be doing something like this until we create that feature.', 'start': 6552.546, 'duration': 8.703}, {'end': 6562.43, 'text': "That's also one option.", 'start': 6561.309, 'duration': 1.121}, {'end': 6565.391, 'text': "But we're not going to do that today just because of a lack of time.", 'start': 6562.47, 'duration': 2.921}, {'end': 6567.692, 'text': "So next, let's move on to the project section.", 'start': 6565.811, 'duration': 1.881}, {'end': 6577.989, 'text': "Next. I've gone ahead and implemented the project section.", 'start': 6573.268, 'duration': 4.721}, {'end': 6580.93, 'text': 'let me first start running our visual tests right.', 'start': 6577.989, 'duration': 2.941}, {'end': 6584.051, 'text': "we don't even need to manually test anymore.", 'start': 6580.93, 'duration': 3.121}, {'end': 6588.732, 'text': 'we can simply just run our visual tests and ensure that everything looks good.', 'start': 6584.051, 'duration': 4.681}], 'summary': 'Testing button functionality, planning for future section, implementing project section with automated visual tests.', 'duration': 56.506, 'max_score': 6532.226, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U6532226.jpg'}, {'end': 6645.704, 'src': 'embed', 'start': 6618.304, 'weight': 4, 'content': [{'end': 6631.254, 'text': "So you can see we're providing a title, a description, an image, the tags, the source code, where to visit the application, and then an ID.", 'start': 6618.304, 'duration': 12.95}, {'end': 6638.579, 'text': 'And so you can add as many projects as you want here, right, you just keep appending to the array of whatever you need.', 'start': 6631.614, 'duration': 6.965}, {'end': 6645.704, 'text': 'And then this map function will basically use all of the values that are coming from that array.', 'start': 6638.599, 'duration': 7.105}], 'summary': 'Providing title, description, image, tags, source code, and id for projects, with ability to add multiple projects and use map function for array values.', 'duration': 27.4, 'max_score': 6618.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U6618304.jpg'}, {'end': 6901.975, 'src': 'embed', 'start': 6872.2, 'weight': 1, 'content': [{'end': 6874.842, 'text': 'Absolutely not actually visual tests.', 'start': 6872.2, 'duration': 2.642}, {'end': 6877.284, 'text': 'take care of all of the risks there for us.', 'start': 6874.842, 'duration': 2.442}, {'end': 6880.146, 'text': "That's the beauty of visual tests, we've written them once.", 'start': 6877.644, 'duration': 2.502}, {'end': 6884.55, 'text': 'And now we can continuously use them to check on our application.', 'start': 6880.486, 'duration': 4.064}, {'end': 6887.032, 'text': "Speaking of which, let's run them now.", 'start': 6884.89, 'duration': 2.142}, {'end': 6892.367, 'text': 'while we continue to talk through our application.', 'start': 6889.224, 'duration': 3.143}, {'end': 6897.051, 'text': 'So then we get to our personal accomplishments.', 'start': 6892.827, 'duration': 4.224}, {'end': 6901.975, 'text': 'Our personal accomplishments also show a bunch of data here.', 'start': 6897.571, 'duration': 4.404}], 'summary': 'Visual tests provide continuous application checks, contributing to personal accomplishments with data.', 'duration': 29.775, 'max_score': 6872.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U6872200.jpg'}, {'end': 7391.41, 'src': 'embed', 'start': 7365.845, 'weight': 0, 'content': [{'end': 7371.026, 'text': 'Is this okay? So of course, you manually validate that everything works here one time.', 'start': 7365.845, 'duration': 5.181}, {'end': 7376.268, 'text': 'And then afterwards, we now have this test to ensure that nothing breaks in the future.', 'start': 7371.386, 'duration': 4.882}, {'end': 7387.264, 'text': "And with that said, we're able to successfully check everything, all of the data about this section, especially the URLs, which are hidden.", 'start': 7376.568, 'duration': 10.696}, {'end': 7391.41, 'text': "of course, everything that's visible can be captured by our visual test.", 'start': 7387.264, 'duration': 4.146}], 'summary': 'Manually validated once, now have test to prevent future breaks, successfully checked all visible data, including hidden urls.', 'duration': 25.565, 'max_score': 7365.845, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U7365845.jpg'}], 'start': 6532.226, 'title': 'Visual testing for ui components', 'summary': 'Discusses testing ui components, implementing visual tests to ensure appearance and validity of data and urls, using snapshot tests, and exemplifying testing on footer, personal accomplishments, and technology section.', 'chapters': [{'end': 6719.053, 'start': 6532.226, 'title': 'Testing button and implementing project section', 'summary': "Discusses testing a button's functionality, implementing a project section, and utilizing visual tests to ensure the appearance of the projects, emphasizing the use of the map function to display project details.", 'duration': 186.827, 'highlights': ['Utilizing visual tests to ensure the appearance of the projects Visual tests are used to ensure the appearance of the projects and eliminate the need for manual testing.', 'Explanation of the map function to display project details The map function is utilized to display project details such as title, description, image, tags, source code, and external links, making it flexible to add or remove projects.', "Discussion of testing the button's navigation functionality The chapter mentions testing the button to ensure it navigates to the correct location and the possibility of creating a failing test for future feature implementation."]}, {'end': 7458.919, 'start': 6719.433, 'title': 'Visual testing for ui components', 'summary': 'Discusses the implementation of visual testing for ui components using snapshot tests to ensure the validity of data and urls, allowing for seamless updates and mitigating risks, exemplified by testing the footer, personal accomplishments, and technology section.', 'duration': 739.486, 'highlights': ['Visual testing using snapshot tests ensures the validity of UI components, capturing hidden details such as URLs and data, and allows for seamless updates with minimal effort, as exemplified by testing the footer, personal accomplishments, and technology section. ', 'The implementation of visual snapshot tests using Jest allows for manual validation of data, preventing future bugs and ensuring the integrity of URLs and data within UI components. ', "Utilizing visual tests for UI components enables the continuous checking of the application's visual appearance and functionality, reducing the need for additional end-to-end tests, as demonstrated in the testing of the personal accomplishments section. "]}], 'duration': 926.693, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8vfQ6SWBZ-U/pics/8vfQ6SWBZ-U6532226.jpg', 'highlights': ['Visual testing using snapshot tests ensures the validity of UI components, capturing hidden details such as URLs and data, and allows for seamless updates with minimal effort, as exemplified by testing the footer, personal accomplishments, and technology section.', "Utilizing visual tests for UI components enables the continuous checking of the application's visual appearance and functionality, reducing the need for additional end-to-end tests, as demonstrated in the testing of the personal accomplishments section.", 'The implementation of visual snapshot tests using Jest allows for manual validation of data, preventing future bugs and ensuring the integrity of URLs and data within UI components.', 'Utilizing visual tests to ensure the appearance of the projects and eliminate the need for manual testing.', 'Explanation of the map function to display project details The map function is utilized to display project details such as title, description, image, tags, source code, and external links, making it flexible to add or remove projects.', "Discussion of testing the button's navigation functionality The chapter mentions testing the button to ensure it navigates to the correct location and the possibility of creating a failing test for future feature implementation."]}], 'highlights': ['Successfully created a CI pipeline that tests the application and deploys it to production, with a potential $100 million value.', 'The course includes creating three React applications, writing unit tests, end to end visual tests, and deploying to Microsoft Azure.', 'Setting up visual testing for web applications by running tests on multiple platforms simultaneously, accepting and setting baselines for new snapshots, and integrating visual testing into the CI pipeline, resulting in successful execution of tests with a checkmark and passing of two tests in the CI pipeline.', "The successful validation of the application's rendering and appearance on web and mobile using visual DOM and end to end tests.", 'Automated visual end to end tests to ensure application appearance on different resolutions', 'Visual testing using snapshot tests ensures the validity of UI components, capturing hidden details such as URLs and data, and allows for seamless updates with minimal effort, as exemplified by testing the footer, personal accomplishments, and technology section.', 'WebDriver.io is a next gen browser and mobile automation test framework for Node.js, suitable for end-to-end testing with browser and mobile, and integration with visual end-to-end testing tools such as screener.', 'The website showcases functional icons, project collection, skills display, personal description, and responsiveness.', 'The decision to use the new version of the baseline for the application.', 'The need for Chrome driver service is considered unnecessary as the focus is on using a single visual end-to-end test for all purposes.']}