diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 16f7cfaf6e3be73ec2c67c3ecd565041c006b2e5..7e098b65f0047c02abf4574ac55bda3f78f20486 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -224,6 +224,7 @@ const MenuBar = props => (
         </div>
         <div className={styles.accountInfoWrapper}>
             <div
+                aria-label="How-to Library"
                 className={classNames(styles.menuBarItem, styles.hoverable)}
                 onClick={props.onOpenTipLibrary}
             >
diff --git a/test/integration/how-tos.test.js b/test/integration/how-tos.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..953cfbc7e4560f121f86af179a6e2dcc0c836a21
--- /dev/null
+++ b/test/integration/how-tos.test.js
@@ -0,0 +1,37 @@
+import path from 'path';
+import SeleniumHelper from '../helpers/selenium-helper';
+
+const {
+    clickText,
+    clickXpath,
+    getDriver,
+    getLogs,
+    loadUri
+} = new SeleniumHelper();
+
+const uri = path.resolve(__dirname, '../../build/index.html');
+
+let driver;
+
+describe('Working with the how-to library', () => {
+    beforeAll(() => {
+        driver = getDriver();
+    });
+
+    afterAll(async () => {
+        await driver.quit();
+    });
+
+    test('Choosing a how-to', async () => {
+        await loadUri(uri);
+        await clickXpath('//button[@title="tryit"]');
+        await clickText('Costumes');
+        await clickXpath('//*[@aria-label="How-to Library"]');
+        await clickText('Say hello'); // Modal should close
+        await clickText('Add a new sprite'); // Make sure first card appears
+        const logs = await getLogs();
+        await expect(logs).toEqual([]);
+    });
+
+    // @todo navigating cards, etc.
+});